当一个选择框选项更改时,两个选择选项更改
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>
我的代码中有什么错误
我就是这样做的。请注意,我是按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>
以下是解决方案:
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/
相关文章:
- CKeditor:更改对话框中的默认选择选项
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- AngularJs列表ng单击以选择选项转换
- 使用基于文本的 Jquery 选择选项
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 在php和mysql中选择选项.一旦选择了选项,就列出我的sql数据库数据
- 选择选项时如何显示警报
- 使用php动态更改选择选项
- 选择“选择选项”时显示文本.怎么做
- LEAFLET地图和带有选择选项的标记-ANGULARjs
- 使用js将动态内容添加到选择选项列表中
- 用于使用javascript循环选择选项
- AngularJS-选择选项并在函数中使用它
- 禁用/启用基于单选/选择选项所选Javascript的文本框
- 如何使用jQuery隐藏与选择选项相关的选择选项列表
- 选择选项是添加或删除事件
- 使用jQuery向“选择选项”添加默认属性
- 构建HTML选择字段并使用JavaScript数组选择选项
- 带有动态选择选项的Firefox html5验证异常
- 只有当Angular从资源对象检索数据时,才选择选项元素