Question

我有一个选择框。如何设置像占位符这样的文本到我的选择框？我添加了一个选定的禁用字段，以便像占位符一样使用，但是当我添加它时，所有选项都会消失。

这是我的代码：

＆＃13;

window.onload = function () {
   $('#slide').editableSelect({ effects: 'slide' });
   $('#html').editableSelect();

   $('#onselect').editableSelect({
       onSelect: function (element) {
           $('#afterSelect').html($(this).val());
       }
   });
}

＆＃13;

input.es-input {
  padding-left:20px!important;
  direction:rtl;
  background-color:#FFF !important;
  border:1px solid #ccc !important;
  height:40px !important;cursor:pointer;
  background-position:5% !important;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG2YAABzjgAA4DIAAIM2AAB5CAAAxgwAADT6AAAgbL5TJ5gAAABGSURBVHjaYvz//z8DOYCJgUzA0tnZidPK8vJyRpw24pLEpwnuVHRFhDQxMDAwMPz//x+OOzo6/iPz8WFGuocqAAAA//8DAD/sORHYg7kaAAAAAElFTkSuQmCC) left center no-repeat
}

.es-list {
  position:absolute;
  padding:0;
  margin:0;
  border:1px solid #d1d1d1;
  display:none;
  z-index:1000;
  background:#fff;
  max-height:160px;
  overflow-y:auto;-moz-box-shadow:0 2px 3px #ccc;-webkit-box-shadow:0 2px 3px #ccc;
  box-shadow:0 2px 3px #ccc
}

.es-list li{
  display:block;
  height:45px;
  padding:0 !important;
  margin:0 !important;
  width:100%;
}

.es-list li.selected {
  background:#2476bb;color:#fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Custom-Filterable-Select-Box-Editable-Select/source/jquery.editable-select.js"></script>
<html>
<head>
</head>
<body>
<select id="slide">
   <option  selected="true" disabled>one</option>
 <option>one</option>
<option>two</option>
  <option>three</option>
</select>
</body>
</html>

＆＃13;

Answer 1

如果我了解您要执行的操作，可以使用以下代码：

注意第一个选项的选中和禁用。

<select id="slide">
  <option disabled selected hidden>Please Choose</option>
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>

Answer 2

这不是选择框的类型头，如果你可以看到DOM中有一个输入框slide。因此，您可以将占位符添加到input#slide。

您可以尝试使用此代码，

$(document).ready(function(){
  $('#slide').attr("placeholder", "One");
})

＆＃13;

window.onload = function () {
   $('#slide').editableSelect({ effects: 'slide' });
   $('#html').editableSelect();

   $('#onselect').editableSelect({
       onSelect: function (element) {
           $('#afterSelect').html($(this).val());
       }
   });
}

$(document).ready(function(){
  $('#slide').attr("placeholder", "One");
})

＆＃13;

input.es-input {
  padding-left:20px!important;
  direction:rtl;
  background-color:#FFF !important;
  border:1px solid #ccc !important;
  height:40px !important;cursor:pointer;
  background-position:5% !important;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG2YAABzjgAA4DIAAIM2AAB5CAAAxgwAADT6AAAgbL5TJ5gAAABGSURBVHjaYvz//z8DOYCJgUzA0tnZidPK8vJyRpw24pLEpwnuVHRFhDQxMDAwMPz//x+OOzo6/iPz8WFGuocqAAAA//8DAD/sORHYg7kaAAAAAElFTkSuQmCC) left center no-repeat
}

.es-list {
  position:absolute;
  padding:0;
  margin:0;
  border:1px solid #d1d1d1;
  display:none;
  z-index:1000;
  background:#fff;
  max-height:160px;
  overflow-y:auto;-moz-box-shadow:0 2px 3px #ccc;-webkit-box-shadow:0 2px 3px #ccc;
  box-shadow:0 2px 3px #ccc
}

.es-list li{
  display:block;
  height:45px;
  padding:0 !important;
  margin:0 !important;
  width:100%;
}

.es-list li.selected {
  background:#2476bb;color:#fff;
}

＆＃13;

<select id="slide">
    <option>one</option>
    <option>two</option>
    <option>three</option>
  </select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Custom-Filterable-Select-Box-Editable-Select/source/jquery.editable-select.js"></script>

＆＃13;

Answer 3

您只需将“占位符”属性添加到“选择”标记

即可

如何将占位符设置为选择框

3 个答案: