Erste Option von slect Menü auf ‚display: none‘, aber es zeigt immer noch

Question

Ich frage mich, wenn Sie mich mit folgendem helfen:

ich ein Auswahlmenü haben, wo ich die ersten drei Optionen mich verstecke . Obwohl sie 'display: none' haben, kann ich immer noch die erste Option sehen. Ich erwartete 'Tomato (I ♥ JS Shirt nur)' zu sehen, wie sie die nächste nach den versteckten ist ...

<select id="color"> 
      <option value="cornflowerblue" class="puns">Cornflower Blue (JS Puns shirt only)</option> 
      <option value="darkslategrey" class="puns">Dark Slate Grey (JS Puns shirt only)</option> 
      <option value="gold" class="puns">Gold (JS Puns shirt only)</option> 
      <option value="tomato" class="heart">Tomato (I &#9829; JS shirt only)</option> 
      <option value="steelblue" class="heart">Steel Blue (I &#9829; JS shirt only)</option> 
      <option value="dimgrey" class="heart">Dim Grey (I &#9829; JS shirt only)</option> 
      </select> 

var punOption = document.getElementsByClassName('puns'); 
for(var i=0; i < punOption.length; i++) { 
    punOption[i].style.display = 'none'; 
} 

Danke, Alina

Answer 1

Sie konnten Ihre vierte Option mit einer Markierung "ausgewählt" Attribut für die Option, so dass es standardmäßig ausgewählt ist. Oder versuchen Sie, dies auch über JS dynamisch zu ändern?

var punOption = document.getElementsByClassName('puns'); 
 
for (var i = 0; i < punOption.length; i++) { 
 
    punOption[i].style.display = 'none'; 
 
}

<select id="color"> 
 
<option value="cornflowerblue" class="puns">Cornflower Blue (JS Puns shirt only)</option> 
 
<option value="darkslategrey" class="puns">Dark Slate Grey (JS Puns shirt only)</option> 
 
<option value="gold" class="puns">Gold (JS Puns shirt only)</option> 
 
<option value="tomato" class="heart" selected>Tomato (I &#9829; JS shirt only)</option> 
 
<option value="steelblue" class="heart">Steel Blue (I &#9829; JS shirt only)</option> 
 
<option value="dimgrey" class="heart">Dim Grey (I &#9829; JS shirt only)</option> 
 
</select>

Answer 2

Dies funktioniert für mich völlig in Ordnung, genau so, wie Sie es haben wollen. Ich nehme an, Sie haben ein Problem mit dem Skript ausgeführt, bevor das DOM geladen wird. Stellen Sie sicher, dass Sie das Skript-Tag nach dem HTML-Code einfügen. Wie folgt aus:

<select id="color"> 
    <option value="cornflowerblue" class="puns">Cornflower Blue (JS Puns shirt only)</option> 
    <option value="darkslategrey" class="puns">Dark Slate Grey (JS Puns shirt only)</option> 
    <option value="gold" class="puns">Gold (JS Puns shirt only)</option> 
    <option value="tomato" class="heart">Tomato (I &#9829; JS shirt only)</option> 
    <option value="steelblue" class="heart">Steel Blue (I &#9829; JS shirt only)</option> 
    <option value="dimgrey" class="heart">Dim Grey (I &#9829; JS shirt only)</option> 
</select> 
<script type="text/javascript"> 
    var punOption = document.getElementsByClassName('puns'); 
    for(var i=0; i < punOption.length; i++) { 
    punOption[i].style.display = 'none'; 
    } 
</script> 

Answer 3

Das Problem ist, das obere Element selected standardmäßig wird. Um dies zu umgehen, können Sie selected für ein anderes Element festlegen können (in diesem Fall, wenn sichtbare Elemente immer unter den versteckt diejenigen sind, funktioniert die nächste Nachbar in Ordnung):

var punOption = document.getElementsByClassName('puns'); 
 

 
for(var i=0; i < punOption.length; i++) { 
 
    punOption[i].style.display = 'none'; 
 
    punOption[i].nextElementSibling.setAttribute('selected', true) 
 
}

<select id="color"> 
 
    <option value="cornflowerblue" class="puns">Cornflower Blue (JS Puns shirt only)</option> 
 
    <option value="darkslategrey" class="puns">Dark Slate Grey (JS Puns shirt only)</option> 
 
    <option value="gold" class="puns">Gold (JS Puns shirt only)</option> 
 
    <option value="tomato" class="heart">Tomato (I &#9829; JS shirt only)</option> 
 
    <option value="steelblue" class="heart">Steel Blue (I &#9829; JS shirt only)</option> 
 
    <option value="dimgrey" class="heart">Dim Grey (I &#9829; JS shirt only)</option> 
 
</select>

EDITED

weitere universellen Einsatz diesen Code betrachten:

// select the entire 'select' block 
 
var color = document.getElementById('color'); 
 

 
// extract 'map' function to enable usage with HTMLCollection 
 
var map = arr => fn => Array.prototype.map.call(arr, fn); 
 

 
// here's your function 
 
var hideClass = options => cl => { 
 
    var selected = false; // flag is set once you define 'selected' attribute 
 
    map(options)(o => { 
 
    if (o.className === cl) { // the class you want to hide? 
 
     o.style.display = 'none'; 
 
    } else if (selected === false) { // this class you don't want to hide && selected === false 
 
     o.setAttribute('selected', true); 
 
     selected = true; // avoid multiple 'selected' set 
 
    } 
 
    return o; 
 
    }) 
 
} 
 

 
// work with all elements inside 'select' 
 
hideClass(color.children)('puns') // here's your class you want to be hidden

<select id="color"> 
 
    <option value="cornflowerblue" class="puns">Cornflower Blue (JS Puns shirt only)</option> 
 
    <option value="darkslategrey" class="puns">Dark Slate Grey (JS Puns shirt only)</option> 
 
    <option value="gold" class="puns">Gold (JS Puns shirt only)</option> 
 
    <option value="tomato" class="heart">Tomato (I &#9829; JS shirt only)</option> 
 
    <option value="steelblue" class="heart">Steel Blue (I &#9829; JS shirt only)</option> 
 
    <option value="dimgrey" class="heart">Dim Grey (I &#9829; JS shirt only)</option> 
 
</select>

Answer 4

Sie müssen das select-Element danach aktualisieren. Ja, html in ein bisschen alt ist diese Aspekte.

var punOption = document.getElementsByClassName('puns'); 
 
for(var i=0; i < punOption.length; i++) { 
 
    punOption[i].style.display = 'none'; 
 
} 
 
var others= document.getElementsByClassName('heart'); 
 
document.getElementById('color').value=others[0].value

<select id="color"> 
 
      <option value="cornflowerblue" class="puns">Cornflower Blue (JS Puns shirt only)</option> 
 
      <option value="darkslategrey" class="puns">Dark Slate Grey (JS Puns shirt only)</option> 
 
      <option value="gold" class="puns">Gold (JS Puns shirt only)</option> 
 
      <option value="tomato" class="heart">Tomato (I &#9829; JS shirt only)</option> 
 
      <option value="steelblue" class="heart">Steel Blue (I &#9829; JS shirt only)</option> 
 
      <option value="dimgrey" class="heart">Dim Grey (I &#9829; JS shirt only)</option> 
 
</select>