兩個選擇選項更改時的一個選擇框選項更改

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/