Question

我有一个关于选择标签选项的查询。 PLZ任何一个通过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＆amp; PHP应该是可见的，所有其他选项都将被禁用。

Answer 1

你可以做2个方法。

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

＆LT; select id =“first_select”＆gt; ＆LT; option id =“lang”＆gt; Lang ＆LT; option id =“script＆gt; Script ＆LT; /选择＆GT;

＆LT; select id =“second_select”＆gt; ＆LT; option id =“lang_1”＆gt; Lang 1 ＆LT; option id =“script_1＆gt;脚本1 ＆LT; /选择＆GT;

第一个选择绑定一个on change事件。

$('#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选择。并且在改变hade并显示适当的一个。

..弗雷德里克

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>

这是伪造的，我的头顶代码，你可能需要稍微修改它，但一般的想法是你会为选项分配一个类并使用这些类值来控制选项可在第二个表格中找到。

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

Hide options in a select list using jQuery

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>

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

4 个答案: