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

Question

我有一个选择框。 如何将诸如占位符的文本设置到我的选择框？ 我添加了一个选定的禁用字段，以用作占位符，但是添加后，所有选项都消失了。

这是我的片段：

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

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

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

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");
})

 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"); }) 

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

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

Answer 3

您可以将“占位符”属性添加到“选择”标签