selectタグを使用してドロップダウンリストを作成したいのですが、最初に表示されるときに「名前を選択してください」などの情報を表示したい場合は、ドロップダウンリストと利用可能なオプションから選択...私はオプションとして "名前を選択してください"を作ろうとしましたが、ユーザーはこれを選択することができます...私が望むものではありません。この機能を使用するにはjavascriptを使用する必要がありますか、何をする必要がありますか？ there'a jqueryの方法は、これを実行する場合はHTMLドロップダウンリストを選択
、これは非常に便利
として<option value="">- Please select a name -</option>を持っていることをJavaScriptのコントロールを作るだろう最初のオプションを選択し、JavaScript（およびバックエンドの検証）を使用して、ユーザーが空の値以外を選択したことを確認します。
選択されたオプションは、あなたの最初のオプションに異なること頬を提出する前に、
多分これはあなたのJavaScript http://htmlhelp.com/reference/html40/forms/option.html
これは、いくつかのjavascriptのハッキングよりも適切です。私はあなたがそれを選択して無効にしなければならないと信じています。また、javascriptを使用して無効な属性を追加することもできます。 – Hayden
シンプル参照DISABLEオプションを指定しないで解決するのに役立ちます、私は考えます。 onclick属性はうまく機能します...
<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>
別のオプションを選択した後、最初のオプションを選択すると、オプション1が選択されます。 javascriptの説明が必要な場合は、尋ねてください。
あなたは本当にこれのためのJSを必要としません、ちょうど基本的なHTML :) –
彼は、jQueryは大丈夫だと言ったので、クライアント側の検証と一緒に行かないでください。機密情報でない限り、サーバー側の検証を行う必要はありません。 編集：あなたの投稿を見ました。あなたは正しい。特定のオプションを無効にできないことを忘れてしまった。 – Yoshiyahu
はこれを試してみてください：
<select>
<option value="" disabled="disabled" selected="selected">Please select a name</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
するとページが読み込まれると、このオプションはデフォルトで選択されます。ただし、ドロップダウンがクリックされるとすぐに、ユーザーはこのオプションを再度選択することはできません。
これが役に立ちます。 jqueryの透かしプラグイン（http://code.google.com/p/jquery-watermark/）
$('#inputId').watermark('Please select a name');
を使用して
これは私がjQueryを使ってこれを行う方法です...
魅力的な作品です！
Googleのコードサイトには、いくつかの良いドキュメントがあります。
希望すると便利です。
これは、HTML入力とtextarea要素にのみ互換性があります！ – fnkr
<option value="" style="display:none">Choose one provider</option>
この方法では、このオプションは表示されませんが、選択ボックスに表示されます。
Mac 10.8.5では、Firefox 24.0とOpera 18.0では動作しますが、Chrome 29.0やSafari 6.1.1では動作しません。 –
テストするには：http://jsfiddle.net/Lexogram/db8Lp/4/ –
うわー、これは驚くほど華麗でシンプルです。 Windows上のChromeで動作します。ありがとうございました。 – Jessica
私は古いポストをネクロて残念だ - しかし、私はこのポスターだった望んでいたと信じて何この
を行うためのより良い方法が見つかりました：私は別のポストの中に、この情報を見つけ
<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>
をこの同じ答えを探して - 感謝
<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>
これは古い記事ですが、これは私
のために働いていました<select>
<option value="" disabled selected>Please select a name...</option>
<option>this</option>
<option>that</option>
</select>
IMOこれを行う最も正しい方法です、おそらく受け入れられた答えになるはずです。 JavaScriptのソリューションは不要です。 –
<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>
あなたはjqueryの-UI selectmenu制御のために同じことを達成したい場合は、あなたが設定されていませんしなければならない「表示：なし」オープンイベントハンドラ内および追加「-menu」id文字列へ。
<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');
}
});
<select>
<option value="" disabled selected hidden>Select an Option</option>
<option value="one">Option 1</option>
<option value="two">Option 2</option>
</select>
が、私が言ったように、その後、それは私がそれを理解 – aherlambang
を選択可能なオプションのリストに「名前を選択してください」に表示されるようになります。だから代わりに何をしたいですか？ボタンをクリックすると、ドロップダウンに置き換えられますか？あなたがドロップダウンだけに固執したいのであれば、私が言及した以外の方法はないと思います。 – simshaun