Question

我有3个选择下拉列表，其中第2个和第3个取决于第1个下拉列表的选择。

每个页面都有一个默认选项，可以在页面加载时显示。我设法让它工作，所以第二个和第三个下拉列表将根据第一个下降更改选项，但是，即使在您点击它们时选择了第一个选项，这两个下载仍然是空的。

HTML

<div id="additional-number-options-284">
  <select class="form-control" id="select-additional-number-country-284">
    <option disabled="disabled" selected="selected">Select a country</option>
    <option value="7818">Country 1</option>
    <option value="7814">Country 2</option>
  </select>
  <select id="select-additional-number-state-284">
    <option disabled="disabled" selected="selected">Select a state</option>
    <option data-product="7818" value="65">State 4</option>
    <option data-product="7818" value="66">State 5</option>
    <option data-product="7814" value="62">State 1</option>
    <option data-product="7814" value="63">State 2</option>
    <option data-product="7814" value="64">State 3</option>
  </select>
  <select id="select-additional-number-plan-284">
    <option disabled="disabled" selected="selected">Select a plan</option>
    <option data-product="7818" value="7819">Plan D (+$5.00)</option>
    <option data-product="7818" value="7820">Plan E (+$15.00)</option>
    <option data-product="7814" value="7815">Plan A (+$10.00)</option>
    <option data-product="7814" value="7816">Plan B (+$8.00)</option>
    <option data-product="7814" value="7817">Plan C (+$12.00)</option>
  </select>
</div>

的jQuery

jQuery("[id^=select-additional-number-country-]").change(function() {
  var id = this.id.split('-').pop();
  jQuery("#select-additional-number-state-" + id)
    .find("option")
    .show()
    .not("option:first, option[data-product='" + this.value + "']")
    .hide();

  jQuery("#select-additional-number-state-" + id).val(
    jQuery("#select-additional-number-state" + id).find("option:visible:first").val());

  jQuery("#select-additional-number-plan-" + id)
    .find("option")
    .show()
    .not("option:first, option[data-product='" + this.value + "']")
    .hide();

  jQuery("#select-additional-number-plan-" + id).val(
    jQuery("#select-additional-number-plan" + id).find("option:visible:first").val());

}).change();

JSFiddle code

Answer 1

问题是因为您的属性以选择器开头无效。您需要将值包装在引号中，因为-将无法正确解释。试试这个：

jQuery(function($) {
  $('[id^="select-additional-number-country-"]').change(function() {
    var id = this.id.split('-').pop();
    $("#select-additional-number-state-" + id).val('').find("option").show().not("option:first, option[data-product='" + this.value + "']").hide();
    $("#select-additional-number-plan-" + id).val('').find("option").show().not("option:first, option[data-product='" + this.value + "']").hide();
  }).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="additional-number-options-284">
  <select class="form-control" id="select-additional-number-country-284">
    <option disabled="disabled" selected="selected">Select a country</option>
    <option value="7818">Country 1</option>
    <option value="7814">Country 2</option>
  </select>
  <select id="select-additional-number-state-284">
    <option disabled="disabled" selected="selected" value="">Select a state</option>
    <option data-product="7818" value="65">State 4</option>
    <option data-product="7818" value="66">State 5</option>
    <option data-product="7814" value="62">State 1</option>
    <option data-product="7814" value="63">State 2</option>
    <option data-product="7814" value="64">State 3</option>
  </select>
  <select id="select-additional-number-plan-284">
    <option disabled="disabled" selected="selected" value="">Select a plan</option>
    <option data-product="7818" value="7819">Plan D (+$5.00)</option>
    <option data-product="7818" value="7820">Plan E (+$15.00)</option>
    <option data-product="7814" value="7815">Plan A (+$10.00)</option>
    <option data-product="7814" value="7816">Plan B (+$8.00)</option>
    <option data-product="7814" value="7817">Plan C (+$12.00)</option>
  </select>
</div>

此处还有两点需要注意。首先使用document.ready事件处理程序的别名$参数。这允许您在函数范围内使用$而不是详细jQuery。

其次，不需要对val()进行错综复杂的使用。您可以简单地调用val('')以在更改从属select时重置所选选项。

动态更改值时，选择时的默认选定值不可见

1 个答案: