[英]How to I modify the code to apply it for three drop-downs? (Jquery)
I have a jquery code which changes according to the previously selected value of drop-down. 我有一个jQuery代码,该代码根据先前选择的下拉列表值而变化。 I use it when I have two drop-downs and it works flawlessly.
当我有两个下拉菜单时,我会使用它,并且它可以完美地工作。
Now the problem is that I am working with 3 drop-downs and I am unable to modify the code according to 3 drop-downs (reason my being new to jquery). 现在的问题是我正在使用3个下拉菜单,并且无法根据3个下拉菜单修改代码(原因是我是jquery的新手)。
This is the code: 这是代码:
Jquery: jQuery:
jQuery(function(){
var $cat = $('select[name=coursename]'),
$items = $('select[name=semno]');
$cat.change(function(){
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $items.find('option.' + rel);
if ($set.size() < 0) {
$items.hide();
return;
}
$items.show().find('option').hide();
$set.show().first().prop('selected', true);});});
I used two drop-downs namely, coursename and semno , with this code and it works perfectly fine. 我用了两个下拉菜单即coursename和semno,与此代码和它完美的罚款。
Now I want to add another dropdown, subnm which comes after semno . 现在,我想添加另一个下拉菜单, subnm ,它在semno之后。 So what I exactly want is that when a person makes a particular selection in coursename the relevant items should appear in semno and among those relevant items, when a value is selected, the items are listed on subnm accordingly.
因此,我真正想要的是,当一个人在课程名称中进行特定选择时,相关项目应出现在semno中,而在这些相关项目中,当选择一个值时,这些项目将相应地列在subnm上 。
I have used rel and class in the option element. 我在option元素中使用了rel和class。
HTML Code HTML代码
Course:
<select name="coursename" id="coursename">
<option value="xyz" rel="xyz">XYZ</option>
<option value="abc" rel="abc">ABC</option>
</select>
Semester:
<select name="semno" id="sem">
<option value="one" class="xyz">I</option>
<option value="two" class="xyz">II</option>
<option value="three" class="abc">III</option>
</select>
Subject:
<select name="subnm" id="subnm">
<option value="p">p</option>
<option value="q">q</option>
<option value="r">r</option>
</select>
I guess I will need a rel option on the semno drop-down and then class on the subnm drop-down in accordance to the semno rel. 我想我将需要在semno下拉列表上使用rel选项,然后根据semno rel在subnm下拉列表上进行分类 。
Forgive me if I am not 100% comprehensible. 如果我不能百分百理解,请原谅我。 I am new to this site and I really need help.
我是这个网站的新手,我真的需要帮助。
Thank You in advance! 先感谢您!
Hope this is what you want. 希望这就是你想要的。 I have used the same function for change event for the second
select
menu. 我为第二个
select
菜单使用了相同的更改事件功能。
$items.change(function(){
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $third.find('option.' + rel);
if ($set.size() < 0) {
$third.hide();
return;
}
$third.show().find('option').hide();
$set.show().first().prop('selected', true);
});
Also I have triggered the change event for second select
in change
event handler of first select
. 我也已经在first
select
change
事件处理程序中触发了第二select
的change
事件。
$items.trigger("change");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.