Перезагрузить выберите, когда выберите выберите

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

Пожалуйста, найдите ссылку ниже: 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);
})

Answer 2

Вы можете сделать что-то вроде этого:

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