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

Question

I have 2 drop down menus, second drop down menu is populated based on first drop down menu, the problem is when press Tab or Submit button the value of second drop down menu is automatically changing it self or showing empty.

Script:

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>

Sorry about my English

Answer 1

You should call the function when page is loaded

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