4

以下の選択したHTML要素を想像してみてください。

<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>

このDOM要素がレンダリングされるとき、選択された値は空白であり、4つのフルーツのいずれでもない必要があります。
別のオプションとして空白を含めたくありません。
出来ますか？

つまり、次のような別のアイテムを追加したくないということです。

<select id="mySelect">
  <option>Select an item </option>
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>

また

<select id="mySelect">
 <option></option>
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>
4

4 に答える 4

5

これはあなたのためにうまくいくでしょう

このHTMLを使用する

<select id="mySelect">
    <option>Apple</option>
    <option>Orange</option>
    <option>Pineapple</option>
    <option>Banana</option>
</select>

そしてjQueryで使用

$('#mySelect').prop('selectedIndex', -1);

Javascriptバージョン（最新のChrome、Firefox、IE 11でテスト済み）

document.getElementById("mySelect").selectedIndex = -1

これにより、リストに空白のオプションを追加せずに、ドロップダウンリストの表示が空白になります。

于 2013-03-26T22:07:30.677 に答える
4

プレーンHTMLではこれを行うことはできません。MDNと公式のW3CHTML5.xナイトリービルドを確認してください。

あなたは本当にそれをJavaScriptで切り替え、「偽の」オプションで選択された属性を使用する必要があります。

<select>要素の属性（プロパティ）の可用性は次のとおりです。

グローバル

アクセスキークラスcontenteditablecontextmenudirドラッグ可能なdropzone隠しid不活性スペルチェックスタイルtabindextitletranslate

選択する

オートフォーカスが無効になっているフォーム複数の名前が必要なサイズ

アップデート

OPは代替としてJavaScriptを許可しているように見えましたが、jQueryは許可していないため、空の（選択された）オプションタグを付加するプレーンなJavaScriptの例を追加しました。

var fakeOpt = document.createElement('option');
var myList = document.getElementById('mySelect');

fakeOpt.selected = 'selected';
myList.insertBefore(fakeOpt, myList[0]);

// Listen to a change
myList.onchange = function(evt){
    var clicked_option = myList.options[myList.selectedIndex].text;

    if (clicked_option.trim() != '') {
        console.log(clicked_option);
    }
    else {
        console.log('Empty option selected');
    }
};

これにより、HTMLコードを手作業で入力する必要がなくなります。

これがJSfiddleです。http://jsfiddle.net/VjCbE/3/

于 2013-03-26T22:03:44.513 に答える
3

私はちょうど非常にきれいな解決策を見つけました：

<pre>
<label for="hardness">Select the hardness</label> : 
    <select name="hardness" id="hardness">
        <option selected="selected" disabled="disabled"></option>
        <option value="3">Easy</option>
        <option value="6">Medium</option>
        <option value="10">Hard</option>
    </select>
</pre>

ここで、selectHardness.selectedIndexは常に>0です。

于 2014-08-13T09:47:37.947 に答える
2 
<option selected disabled value=''></option>

selectedこのオプションをデフォルトにします。 disabledこのオプションはクリックできなくなります。

于 2015-11-19T09:08:55.963 に答える