1

I have two selects on my page, which are populated on the server. The top select here is the "master" select which filters the options you can select in the bottom select, by applying the hidden attribute to the invalid option.

So for instance, this bottom select has, say, 50 options, but only 3 of them apply to "Tyler's Insurance" (see picture below). So the invalid options are hidden. Occasionally, however, when marking many as hidden, the select options will collapse like so, showing only one option with a tiny scrollbar on the right. Clicking the arrows scrolls the option list up and down as expected - and all the other options are there. This only happens on occasion.

enter image description here

Here is the change function that does this logic;

$(top).change(function () { //First, we make all options invisible. $(bottom).find('option').prop("hidden", true); //Then, if the selected option in the top select's ID is the same as the //stored one on the bottom option, we unhide the option. $(bottom).find('option[data-id="' + this.selectedOptions[0].dataset.id + '"]').prop("hidden", false); }

My question is if there is a way to prevent the options that are visible from collapsing into this single-row box, and if so, how would I go about doing so?

Additional information:

Nothing else changes either select, no other selects appear to have this problem.

We target Google Chrome, Version 63.0.3239.84 (Official Build) (64-bit). We utilize jQuery 2.1.4, and Bootstrap 3.3.0.

Trying on the newest Firefox 57.0.2 (64-bit) does not seem to have this error, so I believe it is an issue with how Chrome displays selects...

Improve this question
3
  • 1
    Seems to be a bug in Chrome. In jsfiddle.net/a2h0g8jb/1, only options Two and Four should be visible. However, One appears by default, even though it has the hidden attribute, and it's set as display: none and visibility: hidden. You may need to remove/restore the option elements instead of hide them. Commented Dec 21, 2017 at 22:57
  • It appears that is a valid solution. If you'd like to post that as an answer, I'll accept it, or I can post the solution I came up with. Commented Dec 21, 2017 at 23:52
  • 1
    You can post your own solution and accept it. Would be interested to see it. Commented Dec 22, 2017 at 2:34

1 Answer 1

Reset to default
1

The solution I came up with;

$(top).change(function () { //First, we remove all options. $(bottom).empty() //Declaring variables here, for clarity; I'd inline them normally. //The selected option: var selectedID = this.selectedOptions[0].dataset.id; //filtered options var options = $($("#OptionListTemplate").html()) .filter(function (obj) { return $(this).data("top-id") == selectedID }); //simply append the filtered options to the select. $(bottom).append(options); }

And the required markup;

 <template id="OptionListTemplate"> <option data-top-id="0">Select an option</option> <!--- Populated by controller, more options would go here.--> </template>

Instead of using hidden properties or styles, I utilize a template to store all possible values in the page, and just filter out the ones I don't need. This properly resolves the display issue.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments