jQuery依賴選擇選項

Question

我有一個大型數據庫，我希望顯示選項在第二次選擇取決於使用jQuery的第一個選擇的值。

我想，當我和值1選擇例如選項與值第二selet選項第一選擇，顯示1

你能幫我一個例子嗎？

首先選擇

<select id="city" name="city"> 
<option value="0">Select City</option> 
<option value="1">Manchester</option> 
<option value="2">Leicester</option> 
<option value="3">Londra</option> 
</select> 

其次選擇

<select id="street" name="street"> 
<option value="0">Select Street</option> 
<option value="1">Street 1</option> 
<option value="1">Street 2</option> 
<option value="1">Street 3</option> 
<option value="2">Street 4</option> 
<option value="2">Street 5</option> 
<option value="2">Street 6</option> 
..... 
<option value="1200">Street 7</option> 
<option value="1200">Street 8</option> 
<option value="1200">Street 9</option> 
</select> 

Answer 1

試試這個：

$('#city').change(function(){ 
    $('#street option').hide(); 
    $('#street option[value="'+$(this).val()+'"]').show() 
}); 

Working Demo

Answer 2

這應該是相當直截了當：

$('#city').change(function(){ 
    $('#street option') 
     .hide() // hide all 
     .filter('[value="'+$(this).val()+'"]') // filter options with required value 
      .show(); // and show them 
}); 

Answer 3

這裏是工作DEMO。

將兩個下拉列表同名到同一個類名。

<select id="city" name="city" class="city"> 

和

<select id="street" name="street" class="city"> 

，並使用一些JQuery的。

var $city = $(".city").on('change', function() { 
    $city.not(this).get(0).selectedIndex = this.selectedIndex; 
}); 

Answer 4

http://jsfiddle.net/vikramjakkampudi/fuu94/88/

$('#city').change(function(){ 
$('#street option[value!="'+$(this).val()+'"]').attr("disabled",true); 

}）;

其他選項

Answer 5

這裏的小改進Milind Anantwar的回答，考慮urbz的評論：

• 現在代碼選擇第一選擇的城市
• 的街道上，如果沒有街道城市選擇元素重置

$('#city').change(function() { 
 
    $('#street option').hide(); 
 
    $('#street option[value="' + $(this).val() + '"]').show(); 
 
    // add this code to select 1'st of streets automaticaly 
 
    // when city changed 
 
    if ($('#street option[value="' + $(this).val() + '"]').length) { 
 
    $('#street option[value="' + $(this).val() + '"]').first().prop('selected', true); 
 
    } 
 
    // in case if there's no corresponding street: 
 
    // reset select element 
 
    else { 
 
    $('#street').val(''); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="city" name="city"> 
 
    <option value="0">Select City</option> 
 
    <option value="1">Manchester</option> 
 
    <option value="2">Leicester</option> 
 
    <option value="3">Londra</option> 
 
</select> 
 

 
<select id="street" name="street"> 
 
    <option value="0">Select Street</option> 
 
    <option value="1">Street 1</option> 
 
    <option value="1">Street 2</option> 
 
    <option value="1">Street 3</option> 
 
    <option value="2">Street 4</option> 
 
    <option value="2">Street 5</option> 
 
    <option value="2">Street 6</option> 
 
    <option value="1200">Street 7</option> 
 
    <option value="1200">Street 8</option> 
 
    <option value="1200">Street 9</option> 
 
</select>