Height of selectbox in dropdown

Question

I have a dropdown here which is controlled by another dropdown as,

$("#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();
    }
});

If I select y in first dropdown, why the height of second dropdown's selectbox become reduced and how can i set auto height for it?

score 0 · Answer 1 · edited May 23 '17 at 12:30

0

Your select gets screwed because .css("display", "initial") actually sets display: inline for every <option> instead of the default display: block.

For details check this: Reset CSS display property to default value

The proper way to hide/unhide an element in jQuery is via .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();
    }
});

edited May 23 '17 at 12:30

Community

1
1

answered May 03 '15 at 13:33

dekkard

6,121
1
16
26

`.show()/.hide()` also tried. But not working: http://jsfiddle.net/mpsbhat/5huhxj65/5/ – mpsbhat May 03 '15 at 16:03
Seems to work fine. What do you want the second dropdown to display? – dekkard May 04 '15 at 07:56
But I want to avoid the scrollbar in second dropdown when selecting `y` in first. See the fiddle in above comment. – mpsbhat May 04 '15 at 08:48
Ok, it looks like you can not set custom height for the dropdown box of a select. See here: http://stackoverflow.com/questions/570642/height-of-an-html-select-box-dropdown Instead you might wanna use one of the jQuery dropdown plugins instead. E.g. http://www.sitepoint.com/16-jquery-selectboxdrop-down-plugins/ – dekkard May 04 '15 at 11:30
when x is selected in first drop down, and then select second, all the options are populating. But if I select y in first and then select second, a scrollbar appears. I want to remove that scrollbar. – mpsbhat May 05 '15 at 01:31

Height of selectbox in dropdown

1 Answers1