it-swarm.com.de

Machen Sie einige Optionen in einem Auswahlmenü "nicht auswählbar"

Ich habe ein select -Element mit einigen Optionen, möchte jedoch, dass einige der Optionen nicht auswählbar sind.

Im Grunde ist es so:

<select>
    <option> CITY 1 </option>
    <option> City 1 branch A </option>
    <option> City 1 branch B </option>
    <option> City 1 branch C </option>
    <option> CITY 2 </option>
    <option> City 2 branch A </option>
    <option> City 2 branch B </option>
    ...
</select>

Wie Sie sehen, möchte ich nicht, dass die Städte direkt auswählbar sind, sondern nur die Optionen, die unter jede Stadt fallen.

Wie kann es geschehen, dass der Benutzer auf CITY 1 Oder CITY 2 Klicken kann, aber es nicht ausgewählt wird, so dass der Benutzer gezwungen ist, einen der Zweige darunter zu wählen?

53
user961627

Sie suchen wahrscheinlich ein <optgroup> :

<select>
    <optgroup label="CITY 1">
        <option>City 1 branch A</option>
        <option>City 1 branch B</option>
        <option>City 1 branch C</option>
    </optgroup>

    <optgroup label="CITY 2">
        <option>City 2 branch A</option>
        <option>City 2 branch B</option>
    </optgroup>
</select>

Demo: http://jsfiddle.net/Zg9Mw/

Wenn Sie regelmäßig <option> Elemente nicht auswählbar, Sie können ihnen das disabled Attribut geben (es ist ein boolesches Attribut, daher spielt der Wert keine Rolle):

<option disabled>City 2 branch A</option>
135
Blender

Ich kann Ihrer Frage entnehmen, dass die vorherigen Antworten auf meine Frage genau das sind, wonach Sie suchen. Beachten Sie jedoch, dass zukünftige Personen, die zu dieser StackOverflow-Frage kommen, wie ich, nach einer ähnlichen Antwort suchen, für die sie einfach "Deaktiviert" in eine Option eingeben können.

<select>
  <option value="Apple" disabled>Apple</option>
  <option value="Peach">Peach</option>
  <option value="pear">Pear</option>
  <option disabled="true" value="orange">Orange</option>
</select>

JSFiddle Demo

19
user2199660

jsFiddle Demo

Sie würden ein <optgroup>

<select>
 <optgroup label="City 1">
  <option>City 1 Branch A</option>
  <option>City 1 Branch B</option>
  <option>City 1 Branch C</option>
 </optgroup> 
 <optgroup label="City 2">
  <option>City 2 Branch A</option>
  <option>City 2 Branch B</option>
 </optgroup>
</select>
11
Travis J

From: Wie wird standardmäßig die Option zum Deaktivieren der HTML-Auswahl angezeigt?

Dies ist eine andere Möglichkeit, dasselbe zu tun.

EDIT: (jetzt können Sie es hier ausführen)

<label>Unreal :</label>
<select name="unreal">
   <option style="display:none">Select One</option>
   <option>Money</option>
   <option>Country</option>
   <option>God</option>
</select>
3
maximran

Es gibt viele Möglichkeiten, dies zu erreichen. Ich empfehle ein Plugin mit dem Namen Chosen:

Es wird sein wie:

<select data-placeholder="Choose a Country..." class="chosen-select chose-select-width-custom" multiple tabindex="4" name="countryDigestValues">                                             <option value=""></option>                                                                  
  <optgroup class="custom-optgroup-class" label="Label Title">  
     <option class="custom-option-class">Here goes the option to select</option>                                                                          
  </optgroup>
 </select>

Hier ist der Link, https://harvesthq.github.io/chosen/

0
druiz