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

我有一个关于选择标签选项的问题。plz通过jQuery解决任何一个问题。 假设我有两个选择标记，在第一个选择标记中我有语言和脚本选项，在第二个选择标记中我有关于语言和脚本的选项。问题是，如果我从第一个select标记中选择语言，那么第二个标记中应该只显示语言选项。像

<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应该是可见的，所有其他选项都将被禁用。

对此，您可以使用两种方法

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

lang 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()
});

第二个：几乎相同，但是在第一个select元素中，每个类型使用1个select。并在“更改遮阳板”上显示相应的遮阳板

---

…fredrik

这是一个基本模板，可以相对轻松地进行配置：

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();
        }
    });
});

---

首先，请查看关于的文章。我想您的代码将如下所示：

<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>

这是psuedo，在我的头代码的顶部，您可能需要对它进行一点修改，但一般的想法是，您将为选项分配一个类，并使用这些类值来控制第二个表中哪些选项可用

编辑：看起来hide对选项有效，所以您可以分别用.show或.hide替换上面禁用的=[boolean]调用。另外，请查看前面的问题：

互斥选择：

<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>

显示和隐藏元素在大多数浏览器中都不起作用。