JSFiddle - React, Tailwind, and code Playground

by AbuNidal

HTML

<html>
<head>
</head>
<body>
<select id="K2ExtraField_1" name="K2ExtraField_1">
    <option value="1">عمان</option>
    <option value="2">الزرقاء</option>
    <option value="3">اربد</option>
    <option value="4">البلقاء</option>
    <option value="5">جرش</option>
    <option value="6">الطفيلة</option>
    <option value="7">عجلون</option>
    <option value="8">العقبة</option>
    <option value="9">الكرك</option>
    <option value="10">مادبا</option>
    <option value="11">معان</option>
    <option value="12">المفرق</option>
</select>
<select id="K2ExtraField_2" name="K2ExtraField_2">
    <option value="0">------- حدد المحافظة ------</option>
</select>
</body>
</html>

JavaScript

$('#K2ExtraField_1').change(function() {
    $('#K2ExtraField_2').find('option').remove()
    if ($(this).val() == '1') {
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '1').text('قصبة عمان'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '2').text('ماركا'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '3').text('القويسمة'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '4').text('الجامعة'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '5').text('وادي السير'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '6').text('سحاب'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '7').text('الجيزة'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '8').text('الموقر'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '9').text('ناعور'));
    }
    if ($(this).val() == '2') {
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '10').text('قصبة الزرقاء'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '11').text('الرصيفة'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '12').text('الهاشمية'));
      }
    if ($(this).val() == '3') {
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '17').text('قصبة اربد'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '18').text('الرمثا'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '19').text('الكورة'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '20').text('بني كنان'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '21').text('الاغوار الشمالية'));
        $('#K2ExtraField_2').append($("<option></option>").attr('value', '22').text('بني عبيد'));
       ...