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

【问题标题】：Set default text in dropdown options在下拉选项中设置默认文本
【发布时间】：2016-04-16 02:31:00
【问题描述】：

我想在下拉菜单上设置一个默认文本，它被禁用并且不能让用户选择。

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

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

【问题讨论】：

标签： html kendo-ui

【解决方案1】：

更新

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

由于 Kendo 不支持此行为，您可以使用以下 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>

您可以在下面看到一个有效的 sn-p：

<!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'
}

【讨论】：

sn-p 不适合你吗？它在加载时显示“状态”，然后在尝试更改选择时，该选项将被禁用。此外，如果您实际使用的是 Kendo DropDown，您可能会考虑查看其文档以查看它是否支持此类行为。
我不知道发生了什么，但它没有在我的下拉列表中显示状态
这可能是特定于浏览器的问题。在 Chrome 中看起来不错。实际上即使没有placeholder 属性，它看起来也很好。
它在没有剑道下拉列表的情况下工作。但我想它应该可以使用它。上面有 jordan wagner 提供的小提琴，它使用 kendo-drop-down-list。这对他有用
您可以在此处看到使用 Kendo UI 库的 updated example，并提供了如何使用 optionLabel 属性的示例。看来 Kendo 库目前不支持在其 DropDownList 控件中显示 disabled 元素，因此可能需要考虑这一点。

【解决方案2】：

我对你的意思有点困惑。当我测试代码时，它确实显示了“状态”选项，这听起来就像你想要的那样。

如果您不希望状态作为选项出现在下拉列表中，请尝试以下操作：

<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

【讨论】：

我想将状态显示为默认文本，但它应该被禁用，这样任何人都无法选择它。我的输出显示了来自阿塞拜疆的下拉列表。它没有在下拉列表中提及状态