选择选择时重新加载选择

Question

我有 2 个字段选择。 我希望在第一个选择中选择一个值时，第二个选择将重新加载并显示一些与第一个选择相对应的值。 例子 ： 州和城市：

<select id="billing_state" data-placeholder="State / County">
    <option value="">Select an option…</option>
    <option value="CA" selected="selected">California</option>
    <option value="TX">Texas</option>
</select>

当您选择加利福尼亚重新加载字段时选择城市。

    <select id="billing_city" data-placeholder="City">
        <option value="">Select an option…</option>
        <option value="LA">Los Angeles</option>
        <option value="SD">San Diego</option>
        ...
    </select>

当您选择 Texas reload field 时选择城市。

    <select id="billing_city" data-placeholder="City">
        <option value="">Select an option…</option>
        <option value="">Dallas</option>
        <option value="HT">Houston</option>
        ...
    </select>

我试图找到一些方法。但不是很有效。也许我对此一无所知。你能帮我举个关于jsfiddle的例子吗？

非常感谢！ P / s：哦。我遇到了它。选中时它当前是可见的和隐藏的。我看了一个类似的帖子，但对我的问题不可行。我使用wordpress。并且数据字段已经可用，我只想重新加载它以显示它。我选择了新的州，但它不会重新加载城市。我刷新了网页，它重新加载并显示了一个新的城市字段。

Answer 1

你可以这样做：

$('#billing_state').change(function() {
  var countrycode = $(this).val();

  if (countrycode != "") {
    $('#billing_city option').hide();
    $('#billing_city option:eq(0)').show();
    $('#billing_city option[data-parent=' + countrycode + ']').show();
    $('#billing_city').val("")
  }
});

注意：我已将 data-parent="CA" 添加为“城市”options。喜欢：

<option data-parent="CA" value="LA">Los Angeles</option>
<option data-parent="CA" value="SD">San Diego</option>
<option data-parent="TX" value="DA">Dallas</option>
<option data-parent="TX" value="HT">Houston</option>

演示

$('#billing_state').change(function() {
  var countrycode = $(this).val();

  if (countrycode != "") {
    $('#billing_city option').hide();
    $('#billing_city option:eq(0)').show();
    $('#billing_city option[data-parent=' + countrycode + ']').show();
    $('#billing_city').val("")
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="billing_state" data-placeholder="State / County">
  <option value="">Select an option…</option>
  <option value="CA">California</option>
  <option value="TX">Texas</option>
</select>

<select id="billing_city" data-placeholder="City">
  <option value="">Select an option…</option>
  <option data-parent="CA" value="LA">Los Angeles</option>
  <option data-parent="CA" value="SD">San Diego</option>
  <option data-parent="TX" value="DA">Dallas</option>
  <option data-parent="TX" value="HT">Houston</option>
</select>

Answer 2

请在下面找到链接： https://jsfiddle.net/ulric_469/8Lk5w0xn/11/

<select id="billing_state" data-placeholder="State / County">
    <option value="">Select an option…</option>
    <option value="CA" selected="selected">California</option>
    <option value="TX">Texas</option>
</select>

<div>
  <select id="second_dropdown" data-placeholder="Please Select">
    <option value="">Select an option…</option>
    <option value="LA">Los Angeles</option>
    <option value="SD">San Diego</option>
  </select>
</div>


$("#billing_state").on("change", function(e) {
  var currentVal = $(this).val();
    if (currentVal === "CA") {
    var optn = '<option value="">Select an option…</option><option value="LA">Los Angeles</option><option value="SD">San Diego</option>';
  } else if (currentVal === "TX") {
    var optn = '<option value="">Select an option…</option><option value="">Dallas</option><option value="HT">Houston</option>';
  } else {
    var optn = '<option value="">Select an option…</option>'
  }
  $("#second_dropdown option").remove();
  $("#second_dropdown").append(optn);
})