Question

我想在下拉菜单中设置默认文本，该文本已禁用，无法让用户选择。

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

问题是当我设置选中并禁用时，它在下拉菜单中不显示状态选项。有人可以帮助我。谢谢你提前

Answer 1

<强>更新

此处的问题是由使用Kendo DropDownList组件引起的，该组件在实例化时将从列表中的项集合中删除任何disabled元素。

由于Kendo不支持此行为，您可以使用以下hack实现它，该hack涉及在实例化组件后显式禁用该选项：

<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>

将默认显示文本设置为“State”，但之后不允许明确选择它：

<!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下拉列表时使用optionLabel属性显式设置此默认“占位符”：

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

Answer 2

我对你的意思有点困惑。当我测试代码时，它确实显示了＆＃34; State＆＃34;选项，这听起来像你想要的。

如果您不希望状态显示在下拉列表中，请尝试以下操作：

<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

在下拉选项中设置默认文本

2 个答案: