html input加下拉框 既可以输入也可以下拉选择 demo

以下是一个示例代码，其中使用了`<input>`标签和`<select>`标签来实现输入和下拉选择的功能：

<label for="fruit">选择水果：</label>
<input list="fruits" id="fruit" name="fruit" placeholder="输入或选择...">
<datalist id="fruits">
  <option value="苹果">
  <option value="香蕉">
  <option value="橙子">
  <option value="葡萄">
  <option value="西瓜">
</datalist>

上述代码中，`<input>`标签中的`list`属性指向了一个`<datalist>`标签的`id`，这样就可以在输入框中显示一个下拉列表，用户可以从中选择一个选项。而`<datalist>`标签中的`<option>`标签则定义了下拉列表中的选项。

如果用户想要输入一个不在下拉列表中的选项，也可以直接在输入框中进行输入，无需从下拉列表中选择。

相关问题

layui框架下拉选择框

layui是一个轻量级的前端 UI 框架，它提供了一系列便捷的组件，包括下拉选择框（select）。在layui中创建下拉选择框非常简单，你可以通过HTML结构结合JavaScript或者layui提供的API来实现。

HTML部分通常这样写：

<div class="layui-form-item">
    <label class="layui-form-label">请选择:</label>
    <div class="layui-input-block">
        <select lay-filter="selectDemo" id="demoSelect">
            <option value="">请选择</option>
            <!-- 这里添加下拉选项 -->
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
        </select>
    </div>
</div>

然后，你可以使用layui的`layui.use()`方法加载select组件，并绑定事件处理函数：

layui.use(['layer', 'form'], function () {
    var form = layui.form();
    $('#demoSelect').on('change', function(){
        // 下拉框改变时执行的回调函数
        var selectedValue = $(this).val(); 
        console.log(selectedValue); 
    });
});

这个例子中，当用户从下拉列表中选择一项时，会选择项的值会被打印出来。layui框架为这类交互提供了简洁易用的API，使得开发者能够快速构建美观的功能丰富的界面。