组选择选项的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代码