Высоты переключателя в раскрывающемся меню

Question

У меня есть раскрывающийся here, которая находится под контролем другого выпадающим список, как,

$("#change").change(function() { 
    if(this.value == "x") { 
     $("#mydp").parent().show(); 
     $("#mydp option[value='r']").nextAll().andSelf().css("display", "none"); 
     $("#mydp option[value='r']").prevUntil("#mydp option[value='']").css("display", "initial"); 
    } else if(this.value == "y") { 
      $("#mydp").parent().show(); 
     $("#mydp option[value='r']").nextAll().andSelf().css("display", "initial"); 
     $("#mydp option[value='r']").prevUntil("#mydp option[value='']").css("display", "none"); 

    } else { 
     $("#mydp").parent().hide(); 
    } 
}); 

Если я выбираю y в первом раскрывающемся меню, поэтому высоту переключателя второго DropDown становится уменьшенным и как я могу установить авто высота для него?

Answer 1

Ваш выбор завинчивается, потому что .css("display", "initial") фактически устанавливает display: inline на каждые <option> вместо display: block.

Подробности проверить это: Reset CSS display property to default value

Надлежащим образом, чтобы скрыть/показать элемент в JQuery это через .show()/.hide():.

$("#change").change(function() { 
    if(this.value == "x") { 
     $("#mydp").parent().show(); 
     $r = $("#mydp option[value='r']"); 

     $r.nextAll().andSelf().hide(); 
     $r.prevUntil("#mydp option[value='']").show(); 
    } 
    else if(this.value == "y") { 
     $("#mydp").parent().show(); 
     $r = $("#mydp option[value='r']"); 

     $r.nextAll().andSelf().show(); 
     $r.prevUntil("#mydp option[value='']").hide(); 
    } 
    else { 
     $("#mydp").parent().hide(); 
    } 
});