当动态更改值时，选择上的默认值不可见。

Question

我有三个选择下降，其中第二和第三是取决于选择的第一个下拉。

它们中的每一个都有一个默认的选项来显示页面加载的时间。我设法使它工作，所以第二和第三下拉将改变选项的基础上的第一个，然而，这两个仍然是空的负载，即使第一选择是选择时，你点击他们。

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

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被更改时。