两个选择选项更改时的一个选择框选项更改

Question

我有3个选择下拉框在我的网页，当我选择在第一个选择框中的选项，然后在第二和第三个选项应该过滤thier选择，我已经尝试了很多，我的结果是Iam单独获得一个选择框中的更改，另一个选择框为空。我已经给我下面的代码，请帮我

代码：

<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){ 
$("#select1").change(function() { 
if($(this).data('options') == undefined){ 
/*Taking an array of all options-2 and kind of embedding it on the select1*/ 
$(this).data('options',$('#select2 option').clone()); 

} 
var id = $(this).val(); 
var options = $(this).data('options').filter('[id=' + id + ']'); 
$('#select2').html(options); 
var options = $(this).data('options').filter('[id=' + id + ']'); 
$('#select3').html(options); 
}); 
});//]]> 
</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" id="1">abc</option> 
    <option value="2" id="2">models</option> 
    <option value="3" id="3">Comp</option> 
    <option value="4" id="4">Beat</option> 
    </select> 
</div> 


<div class="sec1 lef" > 
    <select name="type" class="regtext sec1test" id="select3" style="width:99%"> 
    <option id="0" value="0">Select genre</option> 
    <option value="1" id="1">abc</option> 
    <option value="2" id="2">mod</option> 
    <option value="3" id="3">Comp</option> 
    <option value="4" id="4">Beat</option> 
    </select> 
</div> 
</form> 

什么是我的代码

Answer 1

这是我会怎样做到这一点。请注意，我正在过滤data-id，ids必须是唯一的，并且不适合此类功能。

我不知道内部运作的具体细节，但我敢肯定，这是一种具有重复的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/2.1.1/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">abc</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="type" 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-id="4">Beat</option> 
 
    </select> 
 
    </div> 
 
</form>

Answer 2

在这里的错误是解决方案：

jQuery.fn.filterByText = function(textbox, selectSingleMatch) { 
    return this.each(function() { 
     var select = this; 
     var options = []; 
     $(select).find('option').each(function() { 
      options.push({value: $(this).val(), text: $(this).text()}); 
     }); 
     $(select).data('options', options); 
     $(textbox).bind('change keyup', function() { 
      var options = $(select).empty().data('options'); 
      var search = $(this).val().trim(); 
      var regex = new RegExp(search,"gi"); 

      $.each(options, function(i) { 
       var option = options[i]; 
       if(option.value.match(regex) !== null) { 
        $(select).append(
         $('<option>').text(option.text).val(option.value) 
        ); 
       } 
      }); 
      if (selectSingleMatch === true && $(select).children().length === 1) { 
       $(select).children().get(0).selected = true; 
      } 
     });    
    }); 
}; 

$(function() { 
    $('#select2').filterByText($('#select1'), false); 
    $('#select3').filterByText($('#select1'), false); 
}); 

插件是取自这个网站： http://www.lessanvaezi.com/filter-select-list-options/