如何根据下拉选择填充表单字段？

Question

我有一个带有输入字段的表单：名称和描述。名称字段是一个下拉列表。根据选择的名称，描述需要更改。我已经进行了下拉以填充名称。

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

如何根据选定的下拉菜单更改描述字段？

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

Answer 1

更新版本：

您应该将所有 $books 存储为 JavaScript 变量。之后，当您选择书名时，您可以找到书本对象（带有描述和其他字段）并对它们做任何您想做的事情。您可以通过执行以下步骤来实现：

1) 确保您的页面上有 jQuery

2) 在页面某处添加这段 JS 代码（见 cmets）

<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>