javascript - 当一个选项不起作用时，两个选择框会发生变化

Question

我的网页中有三个选择框，一旦我选择第一个框，第二个和第三个框的值应该根据数据ID进行更改， 一旦我更改第一个框，我的第二个和第三个框的值就会发生变化，但问题是，第二个和第三个框的选项是相同的..我在下面给出了我的代码

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

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

这里我的问题是，一旦我选择功能，第二个框应显示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);
    });
});

我测试了这些更改并且工作正常