تغيير قائمة بناءًا على قيمة قائمة أخرى في لارافل

يمكن ضمن ملف العرض وعند إنشاء عناصر الخيارات option لقائمة الأسماء، إضافة القيمة التي تُقابلها من قائمة الأسماء العلمية كخاصية بيانات data كالتالي:

<select name="scientific">
 <option value="{{ $scientific }}">lactuca satvia</option>
 ...               ^^^^^^^^^^^

<select name="common">
 <option data-scientific="{{ $scientific }}">lettuce</option>
 ...                         ^^^^^^^^^^^

 ثم يمكن إضافة شيفرة جافاسكربت إلى الصفحة نفسها للاستماع إلى حدث تغير قيمة قائمة الاسم العام واستخراج القيمة من الخاصية الموضوعة عليها، ثم اتغيير قيمة قائمة الاسماء العلمية واختيار القيمة المقابلة كالتالي:

document.querySelector('select[name=common]').addEventListener('change', function(event){
  // استخراج القيمة
  const scientific = event.target.options[event.target.selectedIndex].dataset.scientific;
  // تغيير القيمة
  document.querySelector('select[name=scientific]').value = scientific
})