在下拉列表中沒有空白項的空白HTML選擇

107

當我寫：

<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標籤與隱藏在下拉列表中的默認空白值？

來源

2011-06-03 Nick Stavrogin

可能重複的[默認選擇選項爲空]（http://stackoverflow.com/questions/8605516/default-select-option-as-blank） – Blazemonger 2015-10-27 20:39:40

你不行。他們根本就不這樣工作。下拉式菜單必須始終選擇其中一個選項。

您可以（雖然我不推薦它）觀察更改事件，然後使用JS刪除第一個選項，如果它爲空。

來源

2011-06-03 06:46:54 Quentin

爲什麼你不建議這種行爲？ – 2012-06-01 15:17:12

有很多情況下，你希望用戶主動從列表中選擇一些東西。我不認爲JS是最好的方式（儘管它似乎是唯一的方式），但我真的認爲這應該是一種方式。 – qwerty 2013-05-14 17:08:53

您可以使用.prop：http://jsfiddle.net/R9auG/將selectedIndex設置爲-1。

對於較老的jQuery版本，使用.attr而不是.prop：http://jsfiddle.net/R9auG/71/。

來源

2011-06-03 06:49:35 pimvdb

也適用於IE8。 – IronicMuffin 2012-03-05 20:23:49

@IronicMuffin：謝謝;事實上，它只是經過測試，似乎適用於所有主流瀏覽器。 – pimvdb 2012-03-05 20:29:57

@zobidafly：感謝編輯;我詳細闡述了一點。 – pimvdb 2012-04-12 14:20:44

<select> 
    <option value="" style="display:none;"></option> 
    <option value="0">aaaa</option> 
    <option value="1">bbbb</option> 
    </select>

來源

2011-12-16 14:37:56

FF /鉻 - OK，歌劇/ ie7-9 - 也不行您可以測試，這裏（帶或不帶JS）：http://jsfiddle.net/R9auG/145/ 所以我建議JS-方法通過@pimvdb – tibalt 2012-10-04 04:11:49

這裏有一個簡單的方法使用普通的JavaScript來做到這一點。這是pimvdb發佈的jQuery腳本的等價物。你可以測試它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>

確保「id_here」匹配窗體和JavaScript中的內容。

來源

2013-06-11 21:37:51

177

只需使用禁用和/或隱藏屬性：

<option selected disabled hidden style='display: none' value=''></option>

selected使這個選項的默認之一。
disabled使此選項不可點擊。
style='display: none'使此選項在舊版瀏覽器中不顯示。請參閱：Can I Use關於隱藏屬性的文檔。
hidden使此選項不會顯示在下拉列表中。

來源

2013-08-28 14:33:43 Eduardo

+13

爲什麼這個簡單的解決方案不被接受。有用。 – bonaca 2013-09-05 13:47:42

其實IE 11確實顯示「隱藏」選項。 – 2013-10-15 18:47:36

Webkit似乎不支持「隱藏」屬性 – 2014-06-24 16:19:31

只需用

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

將任何地方工作，沒有腳本，讓你在同一時間通知用戶。

來源

2013-10-31 10:38:09 mvreijn

你可以試試這個片斷

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

它爲我工作。

來源

2014-02-06 23:02:33 Shenbag

爲了提供更清晰的解釋，最好提供一個http://jsfiddle.net/以配合答案。 – Anonymous 2014-02-06 23:25:22

這假設OP使用jQuery。 – evanrmurphy 2014-10-07 19:18:50

純粹的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('');

完成你在找什麼，很容易把這個在可能會叫你的頁面上，如果你需要空出下拉無需重新加載頁面的功能。

來源

2016-01-23 04:53:09

在下拉列表中沒有空白項的空白HTML選擇

回答

相關問題