Как изменить значение двух зависимых выпадающих списков при загрузке?

Question

Я пытаюсь сделать следующее:

1. получить выбор пользователя из базы данных для первого выпадающего меню.
2. представить соответствующие варианты выбора категории пользователя во второмmenu (from 1).

Я смог сделать это с помощью свойства события mouseup, но это не то, что мне нужно.Я хочу, чтобы это изменилось сразу после первого изменения меню, которое сделано точно после открытия страницы, я пробовал свойство "onload", но оно не работало.Вот мой код:

Тело:

//First menu
المؤهل:
  <select id="qualificationList" name="qualification" required>
      <option value="TM" <?php echo ($studentInfoSqlResultRow['qualification']=="TM")? "selected" : ""?>>التمهيدي</option>
        <option value="ET" <?php echo ($studentInfoSqlResultRow['qualification']=="ET")? "selected" : ""?>>ابتدائي</option>
   </select><br><br>
// Second menu
الفصل:
<select id="get_classes" name="regularClass"></select><br><br>

Сценарий:

<script type="text/javascript">
    $(function() {
      $('[name="qualification"]').mouseup(function(){
        if( $('[name="qualification"]').val() !== 'ET'){
          $("#gradeDL").prop("disabled",true);
        } else {
          $("#gradeDL").prop("disabled",false);
        }
        var category = $('#qualificationList').val();
        var dataString = "category="+category;
        $.ajax({
          type: "POST",
          url: "getClasses.php", // Name of the php files
          data: dataString,
          success: function(html)
          {
              $("#get_classes").html(html);
          }
        });
      });
    });
    </script>

Редактировать: Я решил проблему.Я просто удалил эту строку:

$('[name="qualification"]').mouseup(function(){

Поскольку мне не нужно событие для изменения второго меню, теперь оно выполняет функцию, когда документ полностью загружен, что именно то, что я хочу.Спасибо всем, и я надеюсь, что это поможет.

Answer 1

Подготовьте регулярный выбор класса в зависимости от значения $ studentInfoSqlResultRow ['qualification'] и, если будут сделаны дальнейшие изменения, это может быть сделано вашим кодом ..

Простое решение ..

Answer 2

<!-- HTML -->
<select id="selectOne" name="selectOne" required>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<select id="selectTwo" name="selectTwo"></select>

<!-- Javascript -->
<script type="text/javascript">
    var changeClassMenu = function() {
        $('select[name="selectTwo"').html('<option val="' + $('select[name="selectOne"]').val() + '">' + $('select[name="selectOne"] option:selected').text() + '</option>');
    };

    $(function() {
        changeClassMenu();

        $('select[name="selectOne"]').on('change', function() {
            changeClassMenu();
        });
    });
</script>