Javascript 如何基于下拉选择填充表单字段？

我有一个带有输入字段的表单：name和description。“名称”字段是一个下拉列表。根据所选名称，需要更改描述。我已经在下拉列表中填充了这些名称

<form>
<select name="name" >
@foreach($books as $book)
<option value="{{$book->name}}">{{$book->name}}</option>
@endforeach
</select>

@foreach（$books作为$book）
{{$book->name}
@endforeach

如何根据所选下拉列表更改描述字段

<input type="text name="description" value="{{ $book->description }}>

description}>

更新版本：

您应该将所有$books作为JavaScript变量存储在某个地方。之后，当您选择图书的名称时，您可以找到图书对象（包括描述和其他字段），并对它们执行任何操作。您可以通过实施以下步骤来实现：

1） 确保页面上有jQuery

2） 在页面的某个地方添加此JS代码（请参见注释）

//2.1“存储”页面上某个位置的所有书籍，例如，您可以像这样将PHP变量传递到JS变量中
var books=；
/*
*2.2按名称创建搜索书功能
*（如果$books中“name”字段的每个值都是唯一的）或由某个唯一字段指定，例如“id”
*/
//按书名取书
var getBookByName=函数（bookName）{
如果（书籍类型==='object'）{
for（书籍中的var键）{
if（图书类型[key].name！='undefined'&&books[key].name==bookName）{
还书[钥匙]；
}
}
}
返回false；
}
$（文档）.ready（函数（）{
//使用属性name=“name”在select上添加事件侦听器
$（'select[name=“name”]”）。在（'change'，函数（e）上{
//按书的选定名称获取书
var selectedBook=getBookByname（$（e.target）.find（'option:selected'）.text（））；
如果（已选书本）{
//使用属性name=“description”为输入设置新值
$（'input[name=“description”]'）.val（selectedBook.description）；
}
//我们找不到这本书的名字
否则{
警报（“对不起，我们可以找到这本书的描述”）；
}
});
});

你需要使用jQuery onchange event和AJAX来实现这一点。感谢回复，你知道任何例子吗？感谢回复的可能重复，使用上面的代码，我只能在描述中显示书的名称，而不能在书的描述中显示。thx很多Alexander Reznoik我通过使用AJAX请求实现了这一点

<script type="text/javascript">
// 2.1 "Store" all books in some place on the page, for example, you can pass PHP variable into JS variable like this
var books = <?= json_encode($books); ?>;

/*
 * 2.2 Create function for search book by its name 
 * (if each value of the field "name" in the $books is unique) or by some unique field, for example, "id"
 */

// get book by name
var getBookByName = function (bookName) {
    if (typeof books === 'object') {
        for (var key in books) {
            if (typeof books[key].name !== 'undefined' && books[key].name === bookName) {
                return books[key];
            }
        }
    }
    return false;
}

$(document).ready(function () {
    // add event listener on the select with the attribute name="name"
    $('select[name="name"]').on('change', function (e) {

        // get book by selected name of the book
        var selectedBook = getBookByname($(e.target).find('option:selected').text());
        if (selectedBook) {
            // set new value for the input with the attribute name="description"
            $('input[name="description"]').val(selectedBook.description);
        }
        // we can't find book by it's name
        else {
            alert("Sorry, we can find description for this book");
        }

    });
});
</script>