從禁用選擇

 <select> 
       <option value="volvo">Volvo</option> 
       <option value="saab">Saab</option> 
       <option value="mercedes" selected>Mercedes</option> 
       <option value="audi">Audi</option> 
     </select>  

$('select').attr('disabled', 'disabled');

是可能的刪除向下的箭頭禁用選擇使用jQuery或簡單的Javascript或HTML？從禁用選擇

jsfiddle

來源

2012-07-24 Paul Jeggor

首先，使用'.prop（'disabled'，true）'而不是將屬性設置爲字符串。 – ThiefMaster 2012-07-24 18:58:56

如何使用類似的CSS而不是選擇列表顯示div？ – Dev 2012-07-24 19:01:16

http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox是相關的 – fardjad 2012-07-24 19:01:35

這是不可能的（尤其不要在在所有瀏覽器上運行的方式）。

無論如何，你不應該這樣做，因爲禁用的選擇框仍然有箭頭 - 通常不好做這樣的事情與用戶的操作系統通常做的不同。

來源

2012-07-24 19:00:36 ThiefMaster

現在它適用於所有主流瀏覽器：https：//gist.github.com/joaocunha/6273016 – 2013-08-24 12:25:35

這是不可能的。

嘗試類似這樣的東西。（使用CSS自定義）

$('select').change(function(){ 
    $('<input />').val($(this).val()).appendTo($(this).parent()).attr('readonly','readonly').attr('disabled','disabled'); 
    $(this).remove(); 
});

如果select在頁面加載時已具有值。

var mySelectBox = $('select'); 
$('<input />').val($(mySelectBox).val()).appendTo($(mySelectBox).parent()).attr('readonly'‌,'readonly').attr('disabled','disabled'); 
$(mySelectBox).remove();

來源

2012-07-24 19:04:14

謝謝，但我怎麼能沒有改變？如果文檔已準備好，我有這個。 – 2012-07-24 19:08:10

因此... var mySelectBox = $（'select'）; （'readonly'，'readonly'）。attr（'disabled'，''）'（'（'''''''）'.val（$（mySelectBox）.val（）禁用'）; $（mySelectBox）.remove（）; – 2012-07-24 19:19:00

http://jsfiddle.net/KRn4a/6/這不起作用 – 2012-07-24 19:21:34

在Webkit中器（Chrome，Safari瀏覽器），您可以在的CSS註明：

-webkit-appearance: none;
而不是
-webkit-appearance: menulist;

這樣，你不會有任何選擇預先格式化Css，意思是沒有箭頭。
但正如說ThiefMaster，最好的是保持它像通常的操作系統。

來源

2012-07-24 19:05:09

它沒有這樣做。

通常，「樣式」選擇僅僅是另一種類型的元素，其中應用了css顏色，漸變，圖像等以賦予其下拉感。

例如，您可以將一個輸入放置在它的位置，並有一個下拉選項。

CSS

.input.select { background: url('downarrow.jpg') no-repeat right top; } 
.selectOptions { display: block; width: 100px; height: 200px; background: white; }

標記

<div> 
    <input type="text" class="select" value="click me" /> 
    <div class="selectOptions"> 
     <ul> 
      <li val="some custom value">option</li> 
     </ul> 
    </div> 
</div>

，並在jQuery的你會做這樣的事情：

$('input.select').bind('click', function() { 
    $(this).find('div.selectOptions').toggle(); 
}); 

$('div.selectOptions ul li').bind('click', function() { 
    var val = $(this).attr('val'); 
    // update the input upon click. 
    var input = $(this).parent().parent().parent().find('input.select'); 
    input.val(val); 
});

當然，你可以只用別人的跨瀏覽器庫那這種東西已經......就像jQuery UI一樣。

來源

2012-07-24 19:06:32 Kristian

不，這是不可能的（至少是跨瀏覽器），並且正如@ ThiefMaster所說（+1），在任何情況下都不是一個好主意，因爲您正在擾亂用戶界面的預期規範。

但是，如果您堅持，您將需要使用HTML模擬下拉菜單，而不是使用大約100年前製作的select標記like this one。這些日子裏可能會有更好的。

來源

2012-07-24 19:06:49 Utkanos

您還可以使用css overflow：隱藏在父級中。這樣，您可以向右裁剪選擇框，移除箭頭。

CSS：

<style> 
    .selectParent{width:80px;overflow:hidden;} 
    .selectParent>select{width:100px;} 
</style>

標記：

<div class="selectParent"> 
    <select> 
      <option value="volvo">Volvo</option> 
      <option value="saab">Saab</option> 
      <option value="mercedes" selected>Mercedes</option> 
      <option value="audi">Audi</option> 
    </select> 
</div>

來源

2012-07-24 19:22:38

這是可行的，是：

select[disabled] { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    text-indent: 0.01px; 
    text-overflow: ''; 
}

活生生的例子：http://jsfiddle.net/joaocunha/UhfcA/1/（請務必檢查裏面的要點理解它是如何工作的）。

順便說一句，我與@ThiefMaster：可做並不意味着它應該完成。在不提供自定義箭頭的情況下移除選擇箭頭是非常不好的用戶體驗。

來源

2013-08-24 12:34:27

回答

相關問題