如何在第一个组合框值更改后获取第二个组合框值 (jquery)

Question

我有 2 个组合框，第一个用于省，第二个用于 city/town。

我只想在第一个组合框更改后获取第二个组合框 (city/town) 的值，第二个组合框将在用户首先选择组合框后更改为 ajax。

这是我的代码，但问题是警报出现了两次！

jQuery('#billing_state').on('change', function() {
    jQuery('#billing_city').on('change', function() {
          var state = jQuery(this).val();
          alert(state);
    });

});

Answer 1

你为什么把事件拼凑起来？只需在第一个组合上使用更改。

这是一个例子：

state = {"1":["Rome","Milan","Parma"],"2":["Paris","Lile","Nice"],"3":["Algiers","Jijel","Bejaia"],"4":["London","Manchester"]}


$(document).ready(function(){
 //this if you want that changing province this alert country value
    $("#billing_state").on("change",function(e){
       
          $("#billing_town").children().remove();
          var city =state[$(this).val()];
          if(!city) return;
          $("#billing_town").append('<option value="">- Select -</option>')
          for(i=0; i< city.length;i++) {
            //console.log(city[i]);
            $("#billing_town").append('<option value="'+city[i]+'">'+city[i]+'</option>');
          }
          
    });
  
    // when changing country this alert country value itself
    $("#billing_town").on("change",function(e){
       alert($(this).val());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Province :
<select id="billing_state">
  <option value="">- select -</option>
  <option value="1">Italy</option>
  <option value="2">France</option>
  <option value="3">Algeria</option>
  <option value="4">UK</option>
</select>
<br><br>
Country : 
<select id="billing_town">
</select>

Answer 2

这就是你想要的。试试下面的演示

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<style type="text/css">


</style>

<body>
 
<label>Province</label>
<select id="province">
 <option>california</option>
 <option>austin</option>
 <option>texas</option>
 <option>colombo</option>
</select>

<hr>

<label>city</label>
<select id="city">
 <option>colombo</option>
 <option>canberra</option>
 <option>silicon valley</option>
 <option>ottawa</option>
</select>
 

</body>

<script type="text/javascript">
 
 $("#province").on('change',function(){// in this line identify if there is any changes to first select box
  var thevalue = $("#city").val(); // if there is any changes to first selection box, then at that time get the value of second selection box.
  alert(thevalue); // to check the value of secod check box at the time chage put an alert.
 });

</script>
</html>

否则，如果您想根据第一个 select 框值的用户 selection 显示值，您可以这样做。

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<style type="text/css">


</style>

<body>
 
<label>Province</label>
<select id="province">
 <option>california</option>
 <option>austin</option>
 <option>ottawa</option>
 <option>western</option>
</select>

<hr>

<label>City</label>
<select id="city">
 <option>--select--</option>
</select>
 

</body>

<script type="text/javascript">
 

$("#province").on('change',function(){// in this line identify if there is any changes to first select box
  var thevalue = $(this).val(); // if there is any changes to first selection box, then at that time get the 
  $("#city").text("");
    //display values according to the first value
    if (thevalue == "california") 
    {
         var cities = ["sillicon valley","st pauls","new york"];
         for(var i=0;i<cities.length;i++)
         {
          var createoption = $('<option>'+cities[i]+'</option>');
          $("#city").append(createoption);
         }
    }
    else if(thevalue="austin")
    {
     var cities = ["mirage","manhatten","las vegas"];
         for(var i=0;i<cities.length;i++)
         {
          var createoption = $('<option>'+cities[i]+'</option>');
          $("#city").append(createoption);
         }
    }
    else
    {
     //like above you can add relevent values.
    }


 });


</script>
</html>

如何在第一个组合框值更改后获取第二个组合框值 (jquery)

How to get second combobox value after first one changed (jquery)

javascript

jquery

select

combobox

onchange