selectbox在下拉列表中的高度

Question

我在这里有一个下拉列表，该下拉列表由另一个下拉列表控制为

$("#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，为什么第二个下拉列表的Selectbox的高度会减小以及如何为其设置自动高度？

Answer 1

您的选择会被拧紧，因为.css("display", "initial")实际上为每个<option>而不是默认的display: block设置display: inline。

有关详细信息，请检查以下内容：重置CSS显示属性到默认值

隐藏/UNDED的正确方法是通过.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();
    }
});