Don't display some values in a Select, is possible with css?

[codeap]

Hi, we have a select like this …

<select id="mybooking" name="seats" class="form-control form-control-lg">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

in some pages we need not display options 1, 2, 3, 4 and 5
code constructs the select values for each page, we cannot add to each value a display none, we need a code to insert in a specific page, what code should we use to modify the select of a specific page?

1 – Is possible with css don’t display options 1, 2, 3, 4 and 5?
2 – by default select value is 1, is possible with css select value is 6?

Many thanks

[Paulie_D]

The first is certainly possible with CSS provided you can add a class to the options you don’t want to see.

Then just base your CSS selector on the page it’s on (assuming your page has a class, which is probably a good idea anyway.

https://codepen.io/Paulie-D/pen/YjvzMb

Regarding the second you can’t do this with CSS as selected is an HTML attribute and has to be added to the HTML, either manualy or by Javascript.

https://codepen.io/Paulie-D/pen/Yjvzob

[Pogany]

Hi,

For the first question: Is possible with css don’t display options 1, 2, 3, 4 and 5?

you may also use:

select option:nth-child(-n+6){ 
  display:none;
}

As for the second question I would use JavaScript:

let option6 = document.querySelectorAll(
"#mybooking option")[6];
option6.setAttribute("selected",true);

https://codepen.io/giaco/pen/xJzqXB

[Author]

Posts