[英]Two Select option Changes When One select box option changes
我的網頁中有3個選擇下拉框,當我在第一個選擇框中選擇選項時,然后第二個和第三個選項應過濾它們的選項,我做了很多嘗試,我的結果是我僅在一個選擇框中獲得了更改而另一個選擇框為空。 我在下面給出了我的代碼,請幫幫我
碼:
<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>
我的代碼有什么錯誤
解決方法如下:
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/
這就是我要做的。 請注意,我按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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.