1

選択したドロップダウンでオプションをグループ化できるかどうか疑問に思いました

したがって、最初のオプションを選択すると、最初のサブオプション1と最初のサブオプション2が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/

コードと複雑さが少ないこれはどうですか。

素敵なコメントについては、こちらを参照してください: Hide select option in IE using jQuery "about Removal the elements" etc...または 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()
        }


    });
});​

disableを使用した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 に答える