組選擇選項的jQuery

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的handywork做的，但我相信這將證明你在找什麼：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

你好演示這裏 2演示：

1）項目隱藏/顯示http://jsfiddle.net/DPBPC/（我覺得這個人是你在這裏使用禁用的財產找什麼）

2）& &：http://jsfiddle.net/Y87k5/

這個怎麼用更少的代碼和複雜性。

請在這裏看到了一些很好的意見：Hide select option in IE using jQuery「有關刪除元素」等等...... 或style.display='none' doesn't work on option tags in chrome, but it does in firefox

額外信息同時請注意，在選擇隱藏它的一個已知的bug：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() 
     } 


    }); 
});​ 

使用禁用

//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"); 
     } 

    }); 

});​ 

jQuery代碼