Question

我正在使用datalist HTML属性获取下拉框：

<input list="orderTypes" value="Book">
<datalist id="orderTypes">
  <option value="Book">
  <option value="Copy">
  <option value="Page">
</datalist>

问题在于，现在我必须清除输入框才能查看所有下拉值。是否有一种默认值，但是单击下拉图标后仍可以查看数据列表中的所有值？

Answer 1

我不知道如何在本地执行此操作。您可以将“ helper” div用作输入字段具有值时使用。我无法隐藏本地下拉列表，因此我重命名了ID。使用jQuery。

html

<input list="orderTypes" id="dlInput">
<div id="helper" style="display:none;position:absolute;z-index:200;border:1pt solid #ccc;"></div>
<datalist id="orderTypes" style="z-index:100;">
   <option value="Book">
   <option value="Copy">    
   <option value="Page">
</datalist>

脚本

$(function(){
    // make a copy of datalist 
    var dl="";
    $("#orderTypes option").each(function(){
            dl+="<div class='dlOption'>"+$(this).val()+"</div>";
    });
    $("#helper").html(dl);
    $("#helper").width( $("#dlInput").width() );

    $(document).on("click","#dlInput",function(){
        // display list if it has value
        var lv=$("#dlInput").val();
        if( lv.length ){
                $("#orderTypes").attr("id","orderTypesHide");
                $("#helper").show();
        }
    });

    $(document).on("click",".dlOption",function(){
        $("#dlInput").val( $(this).html() );
        $("#helper").hide();
    });

    $(document).on("change","#dlInput",function(){
        if( $(this).val()==="" ){
            $("#orderTypesHide").attr("id","orderTypes");
            $("#helper").hide();
        }
    }); 
});

jsFiddle

Answer 2

这是您要做什么吗？

    var demoInput = document.getElementById('demoInput'); // give an id to your input and set it as variable
    demoInput.value ='books'; // set default value instead of html attribute
    demoInput.onfocus = function() { demoInput.value =''; }; // on focus - clear input
    demoInput.onblur = function() { demoInput.value ='books'; }; // on leave restore it.

<legend>(double) click on the input to see options:</legend>
    <input list="orderTypes" id="demoInput">
    <datalist id="orderTypes">
      <option value="Book">
      <option value="Copy">
      <option value="Page">
    </datalist>

这里唯一的“问题”是，要查看选项，用户必须再次单击输入，就像“双击输入以查看选项”。

希望有帮助。

Answer 3

我将使用input的{{1}}属性以及Javascript代码，以确保提交后该字段不会为空。

显然，这只是一个示例，您必须修改提交事件。

placeholder

document.getElementById('submitButton').addEventListener('click', function() {
  let inputElement = document.getElementById('myInput');
  if (!inputElement.value) {
    inputElement.value = 'Book';
  }
});

Answer 4

我想用<select> + <option>标签代替<input> + <datalist>来获得您所描述的内容：

<select name="sortBY">

  <option value="Book">Book</option>
  <option value="Copy">Copy</option>
  <option value="Page">Page</option>
</select>

将其全部放入<form></form>标签内将发送它，例如POST方法的值为$_POST['sortBY']。

Answer 5

我也有同样的问题。我只是简单地添加了带有默认数据的占位符。在您的示例中：

<input list="orderTypes" name="orderType" id="orderType" placeholder="Book" />

我监听提交事件。如果输入值为空，则使用 Book 作为默认值，否则使用给定值...

$("#mySubmitButton").click(() => {
    // use event prevent here if need...
    const orderType = $("#orderType").val() || "Book";
    console.log(orderType);
});

如何在输入数据列表中设置默认值并仍然具有下拉菜单？

5 个答案: