如何通过 jQuery 禁用选择标签选项？需要帮助

Question

我对选择标签选项有疑问。请任何人通过 jQuery 解决。 假设我有两个选择标签，在第一个选择标签中，我有语言和脚本的选项，在选择的第二个标签中，我有关于语言和脚本的选项。脚本编写。问题是，如果我从第一个选择标签中选择语言，则只有语言选项应该在第二个标签中可见。就像

<select id="Languages">
    <option value="0">--Select--</option>
    <option value="1">Languages</option>
    <option value="2">Scripting</option>
</select>
<select id="Scripting">
    <option value="0">--Select--</option>
    <option value="1">C#</option>
    <option value="2">VB</option>
    <option value="3">PHP</option>
    <option value="4">jQuery</option>
    <option value="5">javascript</option>
</select>

现在，如果我选择语言选项，则唯一的 C#、VB 和PHP 应该是可见的，并且所有其他选项都将被禁用。

Answer 1

你可以采取两种方法来解决这个问题。

1. 在选项元素的 id 开头有一个字符串，即：

<选择 id="first_select">
<选项 id="lang"> 语言
<选项 id="脚本>脚本
< /选择>

<选择id =“第二选择”>
<选项 id="lang_1"> 语言 1
<选项 id="script_1>脚本 1
< /选择>

在第一个选择上绑定一个更改事件。

$('#first_select').change(function () {
    var type = $(this).attr('id');
    $('#second_select option').hide() // Hide all to just show the ones matching type
    $('#second_select option[id^=' + type + ']').show()
});

二：几乎相同，但是您对第一个选择元素中的每种类型使用 1 个选择。并在更改哈德并显示合适的哈德。

..弗雷德里克

Answer 2

这是一个基本模板，配置起来相对容易：

var languagePairings = {
    language1: ['languageA', 'languageB'],
    language2: ['languageC', 'languageD']
};

$(function() {
    $('#select1').change(function() {
        var $select2 = $('#select2'),
            val = $(this).val(),
            availableLanguages = languagePairings[val];
        if (availableLanguages && availableLanguages.length) {
            for (var i = 0; i < availableLanguages.length; i++) {
                var lang = availableLanguages[i];
                $select2.append($('<option />').attr('value', lang).text(lang));
            }
        } else {
            $select2.empty();
        }
    });
});

Answer 3

首先查看Selected from jquery 的文章。我想你的代码看起来像这样：

<select name="select1" id="select1">
  <option class="script">Scripting</option>
  <option class="language">Languages</option>
</select>

<select name="select2" id="select2">
  <option class="script">javascript</option>
  <option class="language">C#</option>
  <option class="script language">jQuery</option>
</select>

<script type="text/javascript">
  $("#select1").change(function () {
    $("#select2 option").disabled = true;
    $("#select1 option:selected").each(function () {
       var classname = $("#select1").attr("class");
       $("#select2 ."+classname).disabled = false;
     });
    })
  .trigger('change');
</script>

这是伪代码，我的头脑中的代码，你可能需要稍微修改一下，但一般的想法是你会为选项分配一个类，然后使用这些类值来控制第二个表中可用的选项。

编辑：看起来 hide 确实适用于选项，因此您可以分别用 .show() 或 .hide() 替换上面的“disabled = [boolean]”调用。另请查看之前的问题：

使用 jQuery 在选择列表中隐藏选项< /a>

Answer 4

互斥体选择：

<select name="st[]" prev_value="">
   <option value=""></option>
   <option value="1">1</option>
   <option value="2">2</option>
</select>
<select name="st[]" prev_value="">
   <option value=""></option>
   <option value="1">1</option>
   <option value="2">2</option>
</select>
<script>
$("select[name='st[]']").live('change', function()
                                        {if (this.value)
                                            {$("select[name='st[]'] option[value='"+this.value+"']:not(:selected)").remove();
                                            }
                                         if ($(this).attr('prev_value'))
                                            {var prev_option=$(this).find("option[value='"+$(this).attr('prev_value')+"']");
                                             $("select[name='st[]']").not(this).append(prev_option.clone());
                                            }
                                         $(this).attr('prev_value', this.value);
                                        }
                             );
</script>