当未选择父项下拉菜单时，如何显示选择子类别的警报？

Question

我是编码方面的新手，并从互联网上学习如何编码。 我有两个下拉菜单。第一个是父级下拉列表，第二个是子类别下拉列表。

我想在未选择“父级”下拉菜单并且用户直接单击子类别下拉菜单时显示警报消息。消息将显示“您必须选择父类别”。

为此，我尝试选择value = onclick确认（“您必须选择父类别”），这是我想要的，但是问题是，每当我单击子类别时，此警报始终会出现。我也尝试过onchange，但这对我也不起作用。

我还尝试计算索引的length.val，但这也无法正常工作。

我还尝试了以下脚本，但对我也不起作用。

   <script>
   var dropdown = document.getElementById("child");
   dropdown.onchange = function(event){
   if(dropdown.value==""){
     alert("Your message")
   }
   }
   </script>

请查看我对代码的处理方式。

 //This is what I code 
 <script>
 function get_child_options(){
 var parentID = jQuery('#parent').val(); 
 jQuery.ajax({    //Inside jQuery we create ajax object
 url:'/halfdrink/adminseller/parsers/child_categories.php',
 type:'POST',
 data: {parentID : parentID },                                  
 success: function(data){
 jQuery('#child').html(data);    },
 error: function(){alert("Something went wront with the child options.")},

 });
 }

 // This also the main code line where I call get_child_options
 jQuery('select[name="parent"]').change(get_child_options); 
 </script>

我肯定做错了什么，但不知道我做错了什么。  欢迎您提出建议。

Answer 1

与jQuery一起使用。不需要PHP代码。

$(document).ready(function(){
  $('select[name="child"]').change(function(){
    var elem = $('select[name="parent"] option:selected').val();
    if (elem == 0) {
      $('select[name="child"] option[value="0"]').prop('selected', true);
      alert("You must select the parent category!");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>Parent*:</label>
<select name="parent">
  <option value="0"></option>
  <option value="1">Parent 1</option>
  <option value="2">Parent 2</option>
</select>

<label>Child*:</label>
<select name="child">
  <option value="0"></option>
  <option value="1">Child 1</option>
  <option value="2">Child 2</option>
</select>