web-dev-qa-db-ja.com

ドロップダウンリストに空白の項目のない空白のHTML SELECT

Subjの実装方法

私が書くとき：

<form>
  <select>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

デフォルトの選択項目は「aaaa」です

私が書くとき：

<form>
  <select>
     <option value=""></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

デフォルトの選択項目は空白ですが、この空白の項目はドロップダウンに表示されます。

ドロップダウンリストに隠されているデフォルトの空白値でSELECTタグを実装するにはどうすればよいですか？

htmlselectdrop-down-menu
109
Nick Stavrogin

無効または非表示の属性を使用するだけです：

<option selected disabled hidden style='display: none' value=''></option>
  • selectedは、このオプションをデフォルトにします。
  • disabledは、このオプションをクリックできないようにします。
  • style='display: none'は、このオプションを古いブラウザでは表示しないようにします。参照： 使用できます 非表示属性のドキュメント。
  • hiddenは、このオプションをドロップダウンリストに表示しないようにします。
181
Eduardo

-1を使用してselectedIndexを.propに設定すると、 http://jsfiddle.net/R9auG/ を使用できます。

古いjQueryバージョンの場合、.attrの代わりに.propを使用します： http://jsfiddle.net/R9auG/71/ 。

65
pimvdb

単に使用する

<option value="" selected disabled>Please select an option...</option>

スクリプトなしでどこでも機能し、同時にユーザーに指示できます。

30
mvreijn
<select>
     <option value="" style="display:none;"></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
25
Andrey R

簡単なJavaScriptを使用して簡単に実行できます。これは、pimvdbによって投稿されたjQueryスクリプトに相当するVanillaです。あなたはそれをテストできます here 。

<script type='text/javascript'>
  window.onload = function(){
    document.getElementById('id_here').selectedIndex = -1;
  }
</script>

。

<select id="id_here">
  <option>aaaa</option>
  <option>bbbb</option>
</select>

フォームとJavaScriptで「id_here」が一致することを確認します。

11
Mingwei Samuel

できません。彼らは単にそのように動作しません。ドロップダウンメニューでは、常にそのオプションのいずれかを選択する必要があります。

（推奨しませんが）changeイベントを監視し、空の場合はJSを使用して最初のオプションを削除できます。

3
Quentin

純粋にhtmlの場合、@ isherwoodには優れたソリューションがあります。 jQueryの場合、選択ドロップダウンにIDを指定し、jQueryで選択します。

<form>
  <select id="myDropDown">
    <option value="0">aaaa</option>
    <option value="1">bbbb</option>
  </select>
</form>

次に、このjQueryを使用して、ページの読み込み時のドロップダウンをクリアします。

$(document).ready(function() {
    $('#myDropDown').val(''); 
});

または、それを単独で関数内に配置します。

$('#myDropDown').val('');

あなたが探しているものを達成し、ページをリロードせずにドロップダウンを空白にする必要がある場合にページで呼び出される可能性のある関数にこれを置くのは簡単です。

2
Jason Slobotski

このスニペットを試すことができます

$("#your-id")[0].selectedIndex = -1

それは私のために働いた。

0
Shenbag