그룹 선택 옵션 jQuery를

Question

가 처음 옵션을 선택하면 너무

는, 제 1 서브 옵션 (1)과 제 1 서브 옵션 2 번째로 채워질 것이다 선택 드롭에서 그룹 선택하는 것이 가능할 것인지 궁금 이 할 수의 jQuery의 수작업의 비트가 필요 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

하지만 나는 이것이 당신이 찾고있는 무엇을 보여줄 것입니다 믿습니다 : 여기에 드롭 다운

예를 선택 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

정보 추가 또한주의하시기 바랍니다 선택 숨기기 년에 알려진 버그 : 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"); 
     } 

    }); 

});​ 

를 사용하여 3,691,363,210

jQuery 코드