HTML-Auswahl Dropdown-Liste

Question

Ich möchte eine Dropdown-Liste mit der Auswahl, Option-Tag ... aber wenn es zuerst erscheint, ich möchte es mit Informationen wie "Bitte wählen Sie einen Namen" dann klickt der Benutzer an die Dropdown-Liste und wählt aus der verfügbaren Option ... Ich habe versucht, die "Bitte wählen Sie einen Namen" als Option, aber dann wird der Benutzer in der Lage sein, dies zu wählen ... was ist nicht was ich will. Muss ich Javascript verwenden, um diese Funktion zu haben oder was muss ich tun?

Wenn there'a jquery Weg, dies zu tun, wäre dies sehr hilfreich sein

Answer 1

Haben <option value="">- Please select a name -</option> als die erste Option und verwenden Sie JavaScript (und Backend-Validierung), um sicherzustellen, dass der Benutzer etwas anderes als einen leeren Wert ausgewählt hat.

Answer 2

Machen Sie eine Steuer JavaScript, dass vor der Wange machen geltend, dass die gewählte Option auf Ihre erste Option ist anders

Answer 3

Vielleicht kann dies Sie ohne JavaScript http://htmlhelp.com/reference/html40/forms/option.html

Siehe Option DISABLE

Answer 4

Einfach, lösen helfen nehme ich an. Das Onclick-Attribut funktioniert gut ...

<select onchange="if(this.value == '') this.selectedIndex = 1; "> 
    <option value="">Select an Option</option> 
    <option value="one">Option 1</option> 
    <option value="two">Option 2</option> 
</select> 

Nachdem eine andere Option ausgewählt wurde, wird Option 1 ausgewählt, wenn die erste Option ausgewählt ist. Wenn Sie eine Erklärung über das Javascript wünschen, fragen Sie einfach.

Answer 5

Versuchen Sie folgendes:

<select> 
    <option value="" disabled="disabled" selected="selected">Please select a name</option> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
</select> 

Wenn die Seite geladen ist, wird diese Option standardmäßig ausgewählt werden. Sobald jedoch auf das Dropdown-Menü geklickt wird, kann der Benutzer diese Option nicht erneut auswählen.

Hoffe, das hilft.

Answer 6

Dies ist, wie ich dies tun mit JQuery ...

die Jquery-Wasserzeichen-Plugin (http://code.google.com/p/jquery-watermark/) mit

$('#inputId').watermark('Please select a name'); 

klappt wunderbar!!

Es gibt einige gute Dokumentation auf dieser Google-Code-Website.

Hoffe, das hilft!

Answer 7

<option value="" style="display:none">Choose one provider</option> 

Auf diese Weise kann der Benutzer diese Option nicht sehen, aber es wird in der Auswahlbox angezeigt.

Answer 8

Es tut mir Leid einem alten Post Necro - aber ich fand einen besseren Weg, dies zu tun

Was ich glaube, dieses Plakat wollte, war:

<label for="mydropdown" datalabel="mydropdown">Country:</label>  
<select name="mydropdown"> 
    <option value="United States">United States</option> 
    <option value="Canada">Canada</option> 
    <option value="Mexico">Mexico</option> 
    <option value="Other">Not Listed</option> 
</select> 

ich diese Informationen in einem anderen Beitrag, während gefunden für die gleiche Antwort suchen - Dank

Answer 9

<select name="test"> 
    <option hidden="true">Please select a name</option> 
    <option value="Cash">Cash</option> 
    <option value="Draft">Demand Draft No.</option> 
    <option value="Cheque">Cheque No.</option> 
</select> 

Answer 10

Dies ist eine alte Post, aber das war für mich

Answer 11

<select> 
    <option value="" disabled="disabled" selected="selected">Please select name</option> 
    <option value="Tom">Tom</option> 
    <option value="Marry">Marry</option> 
    <option value="Jane">Jane</option> 
    <option value="Harry">Harry</option> 
</select> 

Answer 12

Wenn Sie das gleiche für die jquery-ui selectmenu Steuerung erreichen wollen, dann müssen Sie setzen ‚display: none‘ in den offenen Event-Handler und fügen Sie ‚-Menüs‘ auf den ID-String.

<select id="myid"> 
<option value="" disabled="disabled" selected="selected">Please select  name</option> 
<option value="Tom">Tom</option> 
<option value="Marry">Mary</option> 
<option value="Jane">Jane</option> 
<option value="Harry">Harry</option> 
</select> 

$('select#listsTypeSelect').selectmenu({ 
    change: function(event, data) { 
    alert($(this).val()); 
}, 
open: function(event, ui) { 
    $('ul#myid-menu li:first-child').css('display', 'none'); 
} 
}); 

Answer 13

<select> 
    <option value="" disabled selected hidden>Select an Option</option> 
    <option value="one">Option 1</option> 
    <option value="two">Option 2</option> 
</select>