группы выбора параметров в JavaScript или 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

дополнительной информации Также обрати внимание, что его известная ошибка выбора шкурой: 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"); 
     } 

    }); 

});​