jQuery 依赖的选择选项答案

【问题标题】：jQuery dependent select optionsjQuery 依赖的选择选项
【发布时间】：2020-03-29 01:01:30
【问题描述】：

我有一个大型数据库，我希望在第二次选择中显示选项，具体取决于使用 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>

【问题讨论】：

标签： jquery

【解决方案1】：

这应该很简单：

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

【讨论】：

当值为空时，它会在最后一个上出现一点错误

【解决方案2】：

考虑到urbz 的评论，这里对Milind Anantwar 的回答略有改进：

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

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

【讨论】：

【解决方案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;
});

【讨论】：

【解决方案4】：

试试这个：

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

Working Demo

【讨论】：

我想显示具有相同值的选项并隐藏其他选项
@mIH1：现在应该是 gud。

【解决方案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
     });

【讨论】：

【解决方案6】：

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

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

});

其他选项

【讨论】：

【解决方案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);
    };
});

【讨论】：