Wie füllen Sie die Formularfelder basierend auf der Dropdown-Auswahl?

Question

Ich habe ein Formular mit Eingabefeldern: Name und Beschreibung. Das Namensfeld ist ein Dropdown-Menü. basierend auf dem ausgewählten Namen muss die Beschreibung geändert werden. Ich habe den Drop-Down gemacht, um die Namen bereits zu füllen.

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

Wie ändere ich das Beschreibungsfeld basierend auf dem ausgewählten Dropdown?

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

Answer 1

Aktualisierte Version:

Sie speichern sollte irgendwo alle $ Bücher als JavaScript-Variable. Danach, wenn Sie den Namen des Buches auswählen, können Sie Buchobjekt (mit Beschreibung und anderen Feldern) finden und tun, was Sie wollen mit ihnen. Sie achive können diese Schritte durch die Implementierung:

1) Stellen Sie sicher, dass jQuery auf Ihrer Seite

2) Fügen Sie diese JS-Code irgendwo auf der Seite (siehe Kommentare)

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