1

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

所以如果我选择第一个选项，第一个子选项 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, "_"));
        });​
4

2 回答 2

0

这需要一些 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) );
        }
    })
});​
于 2012-04-27T09:23:00.110 回答
0

Hiya演示这里有2 个演示：

1)要隐藏/显示的项目 http://jsfiddle.net/DPBPC/ (我认为这就是你要找的)

2）&&在这里使用禁用属性：http: //jsfiddle.net/Y87k5/

这个代码和复杂性更少的那个怎么样。

请在此处查看一些不错的评论：在 IE 中使用 jQuery “关于删除元素”等隐藏选择选项...或 style.display='none' 不适用于 chrome 中的选项标签，但它适用于 Firefox

额外信息另请注意，它是 select hide 中的一个已知错误：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");
        }

    });

});​
于 2012-04-27T09:54:51.803 回答