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>

当您选择“德克萨斯州重新加载”字段时，选择城市。

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

选择选择时重新加载选择

2 个答案: