jQuery依赖选择选项

Question

我有一个大型数据库，我想要第二次选择显示选项，具体取决于使用jQuery的第一个选择的值。

我想在第一次选择时选择值为1的选项，在第二个选项中显示值为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() // hide all
        .filter('[value="'+$(this).val()+'"]') // filter options with required value
            .show(); // and show them
});

Answer 2

考虑到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>

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

试试这个：

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

Working Demo

Answer 5

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

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

});

其他选择

Answer 6

这是一项改进，只有在有数据的情况下才能激活街道选择

HTML：

<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>

JS：

$( document ).ready(function() {
    $('#street').prop('disabled', true);
});

$('#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);
        $('#street').prop('disabled', false);
    }
    // in case if there's no corresponding street: 
    // reset select element
    else {
        alert("B");
        $('#street').val('');
        $('#street').prop('disabled', true);
    };
});