2016-08-25 110 views
0

我有2個組合框,首先爲省和第二個城市/城鎮。如何獲得第二個組合框值後第一個更改(jquery)

我只想在第一個組合框更改後獲得第二個組合框(城市/城鎮)的值,第二個組合框將在用戶首先選擇組合框後隨ajax更改。

這是我的代碼,但問題是,警報顯示兩次!

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

}); 
+0

這可以通過使用AJAX來完成。 –

+0

歡迎來到SO。你能告訴我們你迄今爲止嘗試過的代碼嗎? –

+0

嘿馬蘇德它做出敏感:) –

回答

1

爲什麼你對事件進行了修飾?只需在第一個組合上使用更改。

下面是一個例子:

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

 

 
$(document).ready(function(){ 
 
\t //this if you want that changing province this alert country value 
 
    $("#billing_state").on("change",function(e){ 
 
    \t  
 
      $("#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){ 
 
    \t  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>

+0

這個代碼提醒值後,你改變第一個組合框兩次 –

+0

不,它只提醒一次 –

+0

不,我是說當你改變第一個組合框它警報值的第二個..但我想當你改變第一個組合沒有發生任何事情只是第二個組合值的變化,然後當你改變第二個組合框(鎮)它提醒值 –

0

這是你想要的。與演示嘗試下面

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

 
<style type="text/css"> 
 

 

 
</style> 
 

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

 
<hr> 
 

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

 
</body> 
 

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

 
</script> 
 
</html>

否則如果想根據第一個選擇框的值的用戶選擇值顯示,你能做到這樣。

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

 
<style type="text/css"> 
 

 

 
</style> 
 

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

 
<hr> 
 

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

 
</body> 
 

 
<script type="text/javascript"> 
 
    
 

 
$("#province").on('change',function(){// in this line identify if there is any changes to first select box 
 
    \t var thevalue = $(this).val(); // if there is any changes to first selection box, then at that time get the 
 
    \t $("#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++) 
 
     { 
 
      \t var createoption = $('<option>'+cities[i]+'</option>'); 
 
      \t $("#city").append(createoption); 
 
     } 
 
    } 
 
    else if(thevalue="austin") 
 
    { 
 
    \t var cities = ["mirage","manhatten","las vegas"]; 
 
     for(var i=0;i<cities.length;i++) 
 
     { 
 
      \t var createoption = $('<option>'+cities[i]+'</option>'); 
 
      \t $("#city").append(createoption); 
 
     } 
 
    } 
 
    else 
 
    { 
 
    \t //like above you can add relevent values. 
 
    } 
 

 

 
}); 
 

 

 
</script> 
 
</html>

+0

沒有..我想要當你改變國家的價值國家alert.this警報國家價值時,當你改變省份的價值 –

+0

現在嘗試,我改變了它 –

+0

非常感謝我嘗試過,但還沒有工作......注意,當你選擇第一個組合它警報,但我不想那..我想當你改變第二個組合它警報值本身 –

相關問題