本文介绍了jQuery如何更改基于“第三选择列表"选项的第二选择列表和基于第一选择列表的第二选择的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

为什么第三个选择选项会根据第二个更改.但是,当第一选择被选择的第二一个正在改变.虽然去第二个第三不改变 这是我的看法.

Why third select option is changing based upon second one. But when first select is selected second one is changing. while go to second third one is not changing This is my view.

<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>

推荐答案

Select1不起作用,因为HTML中没有select1的id属性.

Select1 is not working since there is no id attribute for select1 in HTML.

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

此外,数据值和选项值之间似乎有些不匹配.

Also, there seems to be some mismatch between data-values and values of options.

  1. 尝试将val保留为该选项的实际值,并将data-value保留为其前身.
  2. 这两个值都区分大小写,所以'telangan' !== 'Telangan'
  1. try to keep val for actual value of the option and data-value for its predecessor.
  2. Both these value are case sensitive so 'telangan' !== 'Telangan'

这是您代码的更新版本:

Here's a updated version of your code:

$("#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();
});
<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>

这篇关于jQuery如何更改基于“第三选择列表"选项的第二选择列表和基于第一选择列表的第二选择的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-03 22:13
查看更多