Question

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

我想选择第一个选项的值为1的选项，在值为1的第二个selet选项中显示。

你能帮我举个例子吗？

首先选择

<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的回答几乎没有改进：

现在代码选择所选城市的第一条街道
如果城市选择元素重置没有街道

＆＃13;

$('#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('');
  };
});

＆＃13;

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

＆＃13;

Answer 3

试试这个：

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

<强> Working Demo

Answer 4

此处正在使用 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 5

尝试此操作，并确保两个选择具有相同的值

$(document).ready(function() {
                $('#street option').hide();
        $('#street option[value="0"]').show()
});

$('#city').change(function(){
        $('#street option').hide(); //hide all options
        $('#street option[value="'+$(this).val()+'"]').show() //show the same value options
        $('#street option[value="0"]').show() //show <option value="0">Select City</option>
        $('#street').val('0') //set option 'Select City' if user changed first select
     });

Answer 6

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

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

}）;

其他选项

Answer 7

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

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);
    };
});

jQuery依赖选择选项

7 个答案: