Entfernen einer "Standard" <option> in einer select-box

Hier ist mein select-Feld: 

<select id="category">
   <option value="">Pick a choice!</option>
   <option value="">choice1</option>
   <option value="">choice2</option>
   <option value="">choice3</option>
   <option value="">choice4</option>
</select>

Möchte ich die Pick a choice! option entfernt werden, wenn der Benutzer klicken Sie auf die select-box. Wenn der Benutzer klicken Sie irgendwo, die Pick a choice! option zurück kommen. Ich will nicht, dass die Benutzer in der Lage sein zu Holen die Pick a choice! option. Was soll ich tun?

  • Sie müssen JavaScript verwenden. Möchten Sie vielleicht zu prüfen, mit einem JS-Bibliothek, wie jquery, mootools, scriptaculous...
  • Müssen Sie einige Javascript schreiben um dies zu erreichen.
  • Duplikat von stackoverflow.com/questions/5805059/select-placeholder ??
  • Ich werde versuchen, etwas zu tun mit JQuery
  • Warum nicht einfach die HTML<optgroup> tag? Er würde sagen, "nimm eine Wahl!", aber es kann nicht ausgewählt werden. Kein JavaScript notwendig.
InformationsquelleAutor Charles Lemarier | 2012-01-31
  1. 4

    Ohne irgendeine PHP-oder JavaScript zu entfernen, die option dynamisch, Sie haben eine weitere sehr einfache Möglichkeit, die ich regelmäßig benutze, ist dies die disabled="disabled" option. Die option bleiben, aber der Benutzer nicht in der Lage sein, um tatsächlich wählen Sie es.

    Den Fehler mit diesem ist, wenn jemand ein Formular abschickt, ohne Auswahl alles, was der leere Wert legt, in der form, aber dies ist, wo Ihre Validierung Handhabung ins Spiel kommt.

    Den code für die "Pick eine Wahl!", wird die option wie folgt Aussehen:

    <option disabled="disabled">Pick a choice!</option>

    Ich hoffe, es hilft.

    • ich fand diese Antwort weiter oben, aber es ist nicht genug. "wählen Sie eine Wahl!" müssen komplett entfernt werden, ich versuche etwas in JQuery um es mit display: none; Entsendung Antwort bald. Thx für deine Hilfe !
    • Ich Schätze das feedback Charles, nur ein Tipp für die Zukunft, wenn Sie auf der Suche nach Möglichkeiten ist es am besten, um eine Liste der Sprachen, mit dem Sie arbeiten, vorzugsweise Liste in den Tag, sondern auch in der SCHRIFTLICHEN Frage ist OK. Der Grund dafür ist, ich habe eine Reihe von Lösungen mit PHP kann ich schreiben, ohne zu denken, es gibt andere, wie das mit JS und jQuery. Beachten Sie, wie keiner hat dir eine Antwort gegeben mit jQuery - einfach einen Kommentar mit dem Vorschlag, es zu versuchen, es ist stark, weil Sie nicht tag es als akzeptabel in Ihrer Antwort, plus es gibt keine früheren versuchen gezeigt mit jQuery. Viel Glück
    InformationsquelleAutor Ryan
  2. 5

    CSS Nur Sol 'N'

    So, ich weiß dieser post ist ziemlich alt, aber eine css-Lösung nicht angeboten... Viel mehr effiziente Art, dies zu erreichen. Beachten Sie das erste <option> nicht über ein value-Attribut; dies ermöglicht es, effektiv zu placehold.

    CSS:

    #category:focus option:first-of-type {
    display: none;
}

    HTML:

    <select id="category">
   <option>Pick a choice!</option>
   <option value="choice1">choice1</option>
   <option value="choice2">choice2</option>
   <option value="choice3">choice3</option>
   <option value="choice3">choice4</option>
</select>

    InformationsquelleAutor Todd
  3. 0

    Hier etwas Abhilfe. Weiß nicht, ob diese suite Ihre Anforderung.

    <html>
<head>
<title>Untitled Document</title>
<script>
function doremove()
{

    var obj=document.getElementById("category");
    obj.remove(0);  
}

function addOpt()
{
var obj=document.getElementById("category");
var option=document.createElement("option");
option.text="Pick a choice!";
option.value = 0;
obj.add(option,1);
obj.value = 0;
}
</script>
</head>

<body>
<select id="category" onfocus="doremove();" onblur="addOpt();">
   <option value="0">Pick a choice!</option>
   <option value="">choice1</option>
   <option value="">choice2</option>
   <option value="">choice3</option>
   <option value="">choice4</option>
</select>
<input type="text" />
</body>
</html>
    InformationsquelleAutor Prasad Rajapaksha
  4. 0

    Versuchen, diese

    $("#SelectID option:first").remove();
    • Dieser code funktioniert gut nach den OP ' s Frage. Sehe keinen Punkt in der negativ-Stimmen.
    InformationsquelleAutor techie_28
Schreibe einen Kommentar