在下拉選項中設置默認文本

我想在禁用的下拉菜單上設置默認文本，並且不允許用戶選擇。在下拉選項中設置默認文本

<select kendo-drop-down-list style="width: 28rem;"> 
    <option selected="selected" disabled="disabled" >State</option> 
    <option>Azerbaijan</option> 
    <option>Belarus</option> 
</select>

問題是當我在下拉菜單中設置選中並禁用它不顯示狀態選項時。有人可以幫我。提前感謝

來源

2016-04-15 chan

更新

這裏的問題是由於使用Kendo DropDownList組件導致的，該組件在實例化時將從列表中的項目集合中移除任何disabled元素。

<select id='state' kendo-drop-down-list style="width: 28rem;"> 
    <option>State</option> 
    <option>Azerbaijan</option> 
    <option>Belarus</option> 
</select> 
<script> 
$(function(){ 
    // Instantiate the drop down 
    $('#state').kendoDropDownList(); 
    // Explicitly disable the first element 
    $("#state_listbox .k-item")[0].disabled = true; 
}); 
</script>

你可以看到這個下文一個工作片斷：

由於劍道不支持這種行爲，你可以使用下面的黑客工具，包括明確禁用該選項，實例化組件後，實現它自己：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> 
 
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
<script src="https://da7xgjtj801h2.cloudfront.net/2015.2.624/js/kendo.ui.core.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Kendo Snippet Example</title> 
 
</head> 
 
<body> 
 
    <select id='state' kendo-drop-down-list style="width: 28rem;"> 
 
    <option>State</option> 
 
    <option>Azerbaijan</option> 
 
    <option>Belarus</option> 
 
    </select> 
 
    <script> 
 
    $(function(){ 
 
     $('#state').kendoDropDownList(); 
 
     // Explicitly disable the first element 
 
     $("#state_listbox .k-item")[0].disabled = true; 
 
    }); 
 
    </script> 
 
</body> 
 
</html>

原始迴應（不包括劍道）

您是否嘗試將placeholder屬性設置爲「狀態」？

<select kendo-drop-down-list style="width: 28rem;" placeholder='State'> 
    <option selected disabled="disabled" >State</option> 
    <option>Azerbaijan</option> 
    <option>Belarus</option> 
</select>

這將設置默認的顯示文字爲「國家」，但它不會允許它明確地在事後選擇：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<select kendo-drop-down-list style="width: 28rem;" placeholder='State'> 
 
    <option selected disabled="disabled" >State</option> 
 
    <option>Azerbaijan</option> 
 
    <option>Belarus</option> 
 
</select> 
 
</body> 
 
</html>

此外，如果問題是由於將Kendo相關樣式應用於元素，因此在實例化Kendo Dropdown時可以使用optionLabel屬性明確設置此默認「佔位符」：

$('[kendo-drop-down-list').kendoDropDownList(){ 
     /* Other configuration here */ 
     optionLabel: 'State' 
}

來源

2016-04-15 17:56:11

我試過了，但它不起作用 – chan

這段代碼不適合你嗎？它在加載時顯示「狀態」，然後嘗試更改該選項時將被禁用。另外，如果你真的在使用Kendo DropDown，你可能會考慮查看它的文檔，看看它是否支持這樣的行爲。 –

我不知道發生了什麼，但它並沒有在我的下拉菜單中顯示狀態 – chan

我對你的意思有點困惑。當我測試代碼時，它確實顯示了「狀態」選項，這聽起來就像你想要的。

，如果你不希望出現在下拉作爲一個選項的狀態，試試這個：

<select kendo-drop-down-list style="width: 28rem;"> 
    <option selected="selected" disabled="disabled" style="display: none;">State</option> 
    <option>Azerbaijan</option> 
    <option>Belarus</option> 
</select>

這裏是一個fiddle

來源

2016-04-15 17:52:20 Jwags

我想顯示狀態作爲默認文本，但它應該被禁用，以便沒有人可以選擇它。我的輸出顯示了阿塞拜疆的下拉菜單。它沒有在下拉菜單中提到狀態 – chan

在下拉選項中設置默認文本

回答

相關問題