javascript - 第二个下拉菜单自动更改其值

Question

我有 2 个下拉菜单，第二个下拉菜单是根据第一个下拉菜单填充的，问题是当按 Tab 或提交按钮时，第二个下拉菜单的值会自动更改自身或显示为空。

脚本:

function ajaxfunction(parent) {
  $(document).ready(function() {
    $('.control').change(function() {
      var Value = $(this).val();
      if (Value != null) {
        jQuery.ajax({
          type: 'POST',
          url: "name.php?comp_type=" + Value,
          success: function(data) {
            $('#name').html(data);
          }
        });
      }
    })
  })
}

HTML:

<!-- first dop down menu -->
<select name="type" class="control" onchange="ajaxfunction(this.value)">
  <option value="Electronice">Electroinc</option>
  <option value="Fashion">Fashion</option>
  <option value="Education">Electroinc</option>
</select>

<!-- second drop down menu -->
<select id="name" name="name"></select>

对不起我的英语

Answer 1

您应该在页面加载时调用该函数

<script>
      $(document).ready(function() {
          ajaxfunction();
      });

 function ajaxfunction(parent){
       $('.control').change(function(){
        var Value = $(this).val();
        if(Value != null){
            jQuery.ajax({     
                type: 'POST',         
                url: "name.php?comp_type="+Value,             
                success: function(data){ 
                    $('#name').html(data);
                }
            });
        }
    })

}
</script>