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

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

脚本：

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>

对不起我的英语

最佳答案

页面加载时应调用该函数

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