3

たとえば、オプション 1、2、および 3 があるドロップダウン リストで、デフォルトのテキスト「選択を行う...」があり、選択可能なオプションではありません。

ここで混乱する場合は、 fiddleです。基本的に、ドロップダウンをクリックしたときに、その例で「選択を行う...」を表示したくありません。1、2、3だけです。

いくつかのJavaScriptで実行できると思いますが、それはハックのようです。

コード：

<select>
    <option>make a selection...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
4

8 に答える 8

8 
<select>
    <option selected="true" disabled="true" >make a selection...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>​

http://jsfiddle.net/Et4VH/

于 2012-12-12T23:39:18.890 に答える
5

を使用してこれを行うことができるように見えますdisplay:none:

<select>
    <option style="display:none">make a selection...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

作業例: http://jsfiddle.net/66Tbz/2/

于 2012-12-12T23:57:58.287 に答える
3

これを試して：

<select>
    <option disabled="true" >make a selection...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

それがうまくいかない場合は、クリックをインターセプトしてキャンセルする Javascript に頼る必要があるかもしれません。

ETA: または、おそらくそれらを組み合わせてください: ドロップダウンをクリックするときに、「選択する」オプションを無効にして、ユーザーが他のオプションの 1 つだけを選択できるようにします。課題は、「選択を行う」を再度有効にするトリガーとなるイベントを見つけることです。

ETA: まあ、以下はおそらく「時間を費やすのに合理的」の外側の限界にあるでしょうが、完全を期すために含めます: ラベルと隠しリストボックスで構成される「コントロール」を構築し、リストボックスの可視性をトリガーするラベルの右側。JavaScriptが必要で、外観を完全に正しくするのは面倒ですが、あなたが説明したことを正確に行うことができます.

しかし、その点に到達した場合は、通常のドロップダウン用にいくつかのクリック ハンドラーをスクリプト化し、その動作を微調整することもできます。

于 2012-12-12T23:37:02.960 に答える
1

アンが提案したように属性を追加できdisabledますが、デフォルトはデフォルトごとに表示されなくなります。

選択を推奨するためにaを使用します。<label>意味のない を使用しないでください<option>。

<label for="foo">Select something</label>
<select name="foo" id="foo">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
于 2012-12-12T23:38:54.537 に答える
0

これを試して：

<select>
    <option selected="selected" disabled="true" >make a selection...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
于 2012-12-12T23:40:29.080 に答える
0

検証 JavaScript 関数を作成し、ユーザーがオプションを選択していない場合はエラーを表示できます。

<form onSubmit="validate()">
<select>
    <option>make a selection...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
</form>
于 2012-12-13T04:45:49.157 に答える
0

インライン スタイルを使用する代わりに (select オブジェクトで "selectid" の ID を想定)、設定しないのはなぜ#selectid > option:first-child{ display: none; }ですか?

私はあなたのフィドルをフォークしました。(へへへへ)

http://jsfiddle.net/qV9kp/

于 2013-12-02T20:16:23.927 に答える