Question

我想知道是否可以在选择下拉列表中对选项进行分组

所以如果我选择第一个选项，第一个子选项1和第一个子选项2将填入第二个选择下拉列表

此处的示例：http://jsfiddle.net/atoswchataigner/7ThYY/

<!-- RUBRIQUE -->
    <select class="ms-RadioText" title="Rubrique" id="ctl00_DropDownChoice" name="ctl00$DropDownChoice">
            <option value="" selected="selected"></option>
            <option value="first option">first option</option>
            <option value="second option">second option</option>        
    </select> 

    <!-- SOUS/RUBRIQUE -->
    <select class="ms-RadioText" title="Sous-Rubrique" id="ctl00_DropDownChoiceSub" name="ctl00$DropDownChoiceSub" disabled="">
            <option value="" selected="selected"></option>
            <option value="first sub option 1">first sub option 1</option>
            <option value="first sub option 2">first sub option 2</option>
            <option value="second sub option 1">second sub option 1</option>
            <option value="second sub option 2">second sub option 2</option>
    </select> 

//first option
//first sub option 1
//first sub option 2

//second option
//second sub option 1
//second sub option 2

//replace spaces with _ in values
jQuery(".ms-RadioText > option").each(function () {
            jQuery(this).attr("value", jQuery(this).attr("value").replace(/ /g, "_"));
        });

Answer 1

这需要一些jQuery手工工作，但我相信这将证明你正在寻找的东西：http://jsfiddle.net/7ThYY/39/

您的新HTML：

<!-- RUBRIQUE -->
    <select class="ms-RadioText" title="Rubrique" id="ctl00_DropDownChoice" name="ctl00$DropDownChoice">
            <option value="" selected="selected"></option>
            <option class='first' value="first option">first option</option>
            <option class='second' value="second option">second option</option>        
    </select> 

    <!-- SOUS/RUBRIQUE -->
    <select class="ms-RadioText" title="Sous-Rubrique" id="ctl00_DropDownChoiceSub" name="ctl00$DropDownChoiceSub" disabled>
            <option value="" selected="selected"></option>
            <option class='first' value="first sub option 1">first sub option 1</option>
            <option class='first' value="first sub option 2">first sub option 2</option>
            <option class='second' value="second sub option 1">second sub option 1</option>
            <option class='second' value="second sub option 2">second sub option 2</option>

和新的jQuery

$('#ctl00_DropDownChoice').change(function(){

    //Determine what class the first option is    
    var type = $('option:selected', this).attr('class');

    //enable the second select box
    $('#ctl00_DropDownChoiceSub').removeAttr('disabled');
    $('#ctl00_DropDownChoiceSub option').each(function(){
        //Go through each option and determine if it's the same type as the first box. If not, add it to a div that will hold options not being used
        if( $(this).attr('class') != type )
        {
            $('#optionholder').append( $(this) );
        }
    });

    //Also loop through the div holding the unused options and see if there are any in there that we need
    $('#optionholder option').each(function(){
        if( $(this).attr('class') == type )
        {
            $('#ctl00_DropDownChoiceSub').append( $(this) );
        }
    })
});

Answer 2

Hiya 演示 2个演示：

1）要隐藏/显示的项目 http://jsfiddle.net/DPBPC/（我认为这是您正在寻找的）

2）＆amp;＆amp;在这里使用禁用的属性：http://jsfiddle.net/Y87k5/

这个代码和复杂程度较低的那个。

请在此处查看一些好评：Hide select option in IE using jQuery＆＃34;关于删除元素＆＃34;等...... 或 style.display='none' doesn't work on option tags in chrome, but it does in firefox

额外信息另请注意，选择隐藏中的已知错误：http://bugs.jquery.com/ticket/1100（但无论如何您的问题已解决：））

使用隐藏/显示项目的Jquery代码

//replace spaces with _ in values
jQuery(".ms-RadioText > option").each(function() {

    jQuery(this).attr("value", jQuery(this).attr("value").replace(/ /g, "_"));
});

$('#ctl00_DropDownChoice').change(function() {
    var sel = $(this).val();

    var selCompare = (sel.indexOf('first') != -1) ? "first" : "second";

    if ($(this).val() == "") return false;

    $("#ctl00_DropDownChoiceSub").removeAttr("disabled");

    $('#ctl00_DropDownChoiceSub > option').each(function() {

        if (!($(this).val().indexOf(selCompare) != -1)) {
            $(this).wrap('<span>').hide()
        }

    });

    $('#ctl00_DropDownChoiceSub > span > option').each(function() {

        if (($(this).val().indexOf(selCompare) != -1)) {
            $(this).unwrap("span").show()
        }


    });
});

使用禁用的Jquery代码

 //first option
//first sub option 1
//first sub option 2

//second option
//second sub option 1
//second sub option 2

//replace spaces with _ in values
jQuery(".ms-RadioText > option").each(function () {

   jQuery(this).attr("value", jQuery(this).attr("value").replace(/ /g, "_"));
});

$('#ctl00_DropDownChoice').change(function(){
    var sel = $(this).val();

    var selCompare = (sel.indexOf('first') != -1) ? "first" : "second";   

   if( $(this).val() == ""   )
       return false;

       $("#ctl00_DropDownChoiceSub").removeAttr("disabled");  

      $('#ctl00_DropDownChoiceSub > option').each(function(){

         if( !($(this).val().indexOf(selCompare) != -1) )
        {
           $(this).attr("disabled","disabled");
        }else{
             $(this).removeAttr("disabled");
        }

    });

});

在javascript或jQuery中选择组选项

2 个答案: