使用 jQuery 依赖国家/地区下拉列表的问题

Question

jQuery 不适用于单选（第一个选项国家/地区从下拉列表中选择，第二个国家/地区从数据库中获取）我用于多选的相同数据库工作正常但单选不工作请帮助！！！

mysql数据库是 state_id country_id state_name 德里 印度 德里

<label for="country">Country</label> 
<?php include "fetch_country.php"; ?>
<select id="country" name="country"  class="form-control" >
<option value="India" label="India">India</option>
<option value="USA" label="USA">USA</option>
<option value="UK" label="UK">UK</option>
<option value="Canada" label="Canada">Canada</option>
</select>

   
<label for="state">State</label>

<select id="state" name="state"  class="form-control" >
<option disabled>Select Country First</option> 
</select>





single select not working i try this 
( Not working on single select !!)

<script>
$(document).ready(function(){

$('#country').on('change', function(){
 
onChange:function(option, checked){
var selected = this.$select.val();
if(selected.length > 0)
{
$.ajax({
url:"fetch_country.php",
method:"POST",
data:{selected:selected},
success:function(data)
{
$('#state').html(data);
}
})
}
}
});
}); 
</script>


Pls see multiselect script which is working fine but i want to change this into single select 
$(document).ready(function(){

$('#country').multiselect({
nonSelectedText:'?',
buttonWidth:'250px',
maxHeight: 400,
onChange:function(option, checked){
var selected = this.$select.val();
if(selected.length > 0)
{
$.ajax({
url:"fetch_country.php",
method:"POST",
data:{selected:selected},
success:function(data)
{
$('#state').html(data);
$('#state').multiselect('rebuild');
}
})
}
}
});
$('#state').multiselect({
nonSelectedText: '?',
allSelectedText: 'All',
buttonWidth:'250px', 
includeSelectAllOption: true,
maxHeight: 400,
enableFiltering:true
});
});

Answer 1

考虑以下。

$(function() {
  $('#country').change(function() {
    var selected = $(this).val();
    if (selected.length > 0) {
      $.ajax({
        url: "fetch_country.php",
        method: "POST",
        data: {
          selected: selected
        },
        success: function(data) {
          $('#state').html(data);
        }
      })
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="country" name="country" class="form-control">
  <option disabled selected>Select Country</option>
  <option>USA</option>
</select>
<select id="state" name="state" class="form-control">
  <option disabled selected>Select Country First</option>
</select>

您的代码未显示 #country 元素。我将它添加到这个示例中，以便在对其进行更改时触发 AJAX 调用。我无法对此进行进一步测试。

要获取元素的值，请使用 $(this).val()。其余的看起来应该可以工作。