Question

为什么第三个选择选项会根据第二个选项进行更改。但是当选择第一个选择时，第二个选择正在改变。而去第二个三分之一并没有改变这是我的观点。

<select name="select1" select="select1">
  <option value="">Select Country</option>
  <option value="india">India</option>
  <option value="america">America</option>
</select>
<select name="select2" id="select2">
  <option value="">Select State</option>
  <option data-value="orissa" value="india">Orissa</option>
  <option data-value="telangan" value="india">Telangan</option>
  <option data-value="america" value="america">USA</option>
  <option data-value="america" value="america">California</option>
</select>
<select name="select3" id="select3">
  <option value="">Select city</option>
  <option value="orissa">Nal</option>
  <option value="orissa">Mir</option>
  <option value="Telangan">Hyd</option>
  <option value="Telangan">Vija</option>
  <option value="america">KRK</option>
  <option value="america">MRK</option>
</select>
This is my script
<script>
  $("#select1").change(function() {
    if ($(this).data('options') == undefined) {
      $(this).data('options', $('#select2 option').clone());
    }
    var id = $(this).val();
    var options = $(this).data('options').filter('[value=' + id + ']');
    $('#select2').html(options);
    });
  $("#select2").change(function() {
  if ($(this).data('options') == undefined) {
    $(this).data('options', $('#select3 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[data-value=' + id + ']');
  $('#select3').html(options);
});
</script>

Answer 1

Select1无法正常工作，因为HTML中的select1没有id属性。

<!-- change -->
<select name="select1" select="select1">
<!-- to -->
<select name="select1" id="select1">

此外，数据值与选项值之间似乎存在一些不匹配。

尝试将val保留为选项的实际值，并为其前任保留data-value。
这两个值都区分大小写，因此'telangan' !== 'Telangan'

这是您的代码的更新版本：

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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="display: none;">
    <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="america">USA</option>
    <option data-value="america" value="america">California</option>
</select>

<select name="select3" id="select3" style="display: none;">
    <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="america">KRK</option>
    <option data-value="america">MRK</option>
</select>

＆＃13;

jQuery如何根据第三个选择列表选项更改第二个选择列表，第二个选择基于第一个选择列表

1 个答案: