如何修改代码以将其应用于三个下拉列表?(Jquery）

How to I modify the code to apply it for three drop-downs? (Jquery)

本文关键字：三个 下拉列表 Jquery 应用于 何修改 修改 代码      更新时间：2023-09-26

我有一个jquery代码，它会根据之前选择的下拉列表值进行更改。当我有两个下拉菜单时，我会使用它，而且它工作得很完美。

现在的问题是，我正在使用3个下拉列表，无法根据3个下拉菜单修改代码（原因是我是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);});});

我在这段代码中使用了两个下拉菜单，即coursename和semno，它运行得非常好。

现在我想添加另一个下拉列表，subnm，它位于semno之后。因此，我真正想要的是，当一个人在课程名称中进行特定选择时，相关项目应出现在semno，并且在这些相关项目中，当选择一个值时，这些项目相应地列在>子网上。

我在option元素中使用了rel和class。

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>

我想我需要semno下拉列表上的rel选项，然后根据semnorel在子网上分类。

如果我不是100%可以理解的，请原谅我。我是这个网站的新手，我真的需要帮助。

提前感谢！

希望这就是你想要的。对于第二个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);
});

此外，我在第一个select的change事件处理程序中触发了第二个select的更改事件。

$items.trigger("change");

请参阅此小提琴

相关文章：