javascript 下拉选择列表修改

i7uaboj4  于 2023-02-11  发布在  Java
关注(0)|答案(1)|浏览(166)

多亏了这个网站上的人们,我慢慢地让这个脚本像我想的那样工作。有一件事我不明白
1.如何让“州”(选择2)在选择国家(选择1)时显示“选择州”而不是直接显示选项,类似地,如何让“城市”在选择“州”(选择2)时显示“选择城市”而不是直接显示选项)。
1.如何使城市(选择3)显示“选择城市”当以前选择的“州”(选择2)被取消选择或更改为另一个国家。同样的“州”当以前选择的“国家”被取消选择或更改为另一个国家(也为城市更改为“选择城市”当这种情况发生)

$(function() {
  $("#select1").change(function() {
    if ($(this).data('options') == undefined) {
      $(this).data('options', $('#select2 option').clone());
    }
    var id = $(this).val();
    if (id == "") {
      $('#select2').val('');
      $('#select3').val('');
      return;
    }
    var options = $(this).data('options').filter('[data-value=' + id + ']');
    $('#select2').html(options).show();
  });

  $("#select2").change(function() {
    if ($(this).data('options') == undefined) {
      $(this).data('options', $('#select3 option').clone());
    }
    var id = $(this).val();
    if (id == "") {
      $('#select3').val('');
      return;
    }
    var options = $(this).data('options').filter('[data-value=' + id + ']');
    $('#select3').html(options).show();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="select1" id="select1">
  <option value="">Select Country</option>
  <option value="india">India</option>
  <option value="america">America</option>
</select>

<select name="select2" id="select2" style="inline">
  <option value="">Select State</option>
  <option data-value="india" value="orissa">Orissa</option>
  <option data-value="india" value="telangan">Telangan</option>
  <option data-value="america" value="usa">USA</option>
  <option data-value="america" value="america">California</option>
</select>

<select name="select3" id="select3" style="inline">
  <option value="">Select city</option>
  <option data-value="orissa">Nal</option>
  <option data-value="orissa">Mir</option>
  <option data-value="telangan">Hyd</option>
  <option data-value="telangan">Vija</option>
  <option data-value="usa">ttt</option>
  <option data-value="usa">ttt</option>
  <option data-value="america">KRK</option>
  <option data-value="america">MRK</option>
</select>
oxiaedzo

oxiaedzo1#

台词

var options = $(this).data('options').filter('[data-value=' + id + ']');
$('#select2').html(options).show();

删除所有选项,并将其替换为 * 仅 * 与过滤器匹配的选项-显然(?)"请选择"(value ="")option不匹配,因此不包括在内。
您可以调整筛选器以包含它,或者在select后面添加空白选项。
x一个一个一个一个x一个一个二个x
重构以方便调用
一个三个三个一个

相关问题