Question

我的网页上有三个选择框，一旦我选择第一个框，第二个和第三个框的值应根据data-id进行更改，一旦我更改了第一个框，我的第二个和第三个框值正在改变，但问题是，第二个和第三个框的选项是相同的..我已经在下面给出了我的代码

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form action="send_request.php" name="myForm1" method="post" onsubmit="return(validate1());">
  <select class="regtext sec1test" name="select" id="select1" style="width:99%">
    <option value="0">Select What?</option>
    <option value="1">Features</option>
    <option value="2">Video</option>
    <option value="3">Buy1</option>
    <option value="4">Buy2</option>
  </select>
  <div class="sec1 lef">
    <select name="type" class="regtext sec1test" id="select2" style="width:99%">
      <option id="0" value="0">Select genre</option>
      <option value="1" data-id="1">abc1</option>
      <option value="0" data-id="1">abc2</option>
      <option value="5" data-id="1">abc3</option>
      <option value="2" data-id="2">models</option>
      <option value="3" data-id="3">Comp</option>
      <option value="4" data-id="4">Beat</option>
    </select>
  </div>


  <div class="sec1 lef">
    <select name="name" class="regtext sec1test" id="select3" style="width:99%">
      <option id="0" value="0">Select genre</option>
      <option value="1" data-id="1">abc</option>
      <option value="2" data-id="2">mod</option>
      <option value="3" data-id="3">Comp</option>
      <option value="4" data-data-id="4">Beat</option>
    </select>
  </div>
</form>

＆＃13;

这里我的问题是一旦我选择功能第二个盒子显示abc1，abc2，abc3和第三个盒子应该单独显示abc，但结果是盒子都有abc1，abc2，abc3。所以请指导我如何纠正它

Answer 1

您通过已经过滤的第二个框的选项值更新第三个框并将其克隆到第三个框，因此您需要为每个控件创建单独的数据以避免控件选项之间重叠

尝试将js代码更改为以下内容：

$(document).ready(function () {
    var $select1=$("#select1");
    var $select2=$("#select2");
    var $select3=$("#select3");

    $select1.data('options1', $select2.html())
    $select1.data('options2', $select3.html())

    $select1.change(function(){
        var val=$select1.val();
        var options1 = $($select1.data('options1')).filter('[data-id="'+val+'"]');
        var options2 = $($select1.data('options2')).filter('[data-id="'+val+'"]');
        $select2.html(options1);
        $select3.html(options2);
    });
});

我测试了这些变化并且工作正常

Answer 2

如果我理解，你想根据data-id = val过滤selec2和select3的选择列表：

$select1.change(function() {
  var val = $select1.val();

  $select2.find('[data-id!="' + val + '"]').hide();
  $select2.find('[data-id="' + val + '"]').show();

  $select3.find('[data-id!="' + val + '"]').hide();
  $select3.find('[data-id="' + val + '"]').show();

});

当一个chage不起作用时，有两个选择框更改

2 个答案: