可下拉可输入的输入框实现方法

今天药忘吃喽~ 2023-01-08 02:10 305阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI0OTc1NA_size_16_color_FFFFFF_t_70]  
如图所示，需求为可选择下拉框内容，若下拉框没有要选择的信息，则输入新的值。

<div class="layui-inline">
    	<label class="layui-form-label">合同期限<b class="must">*</b></label>
    	<div class="layui-input-block">
    		<input type="text" name="contractTimeLimit" bi="合同期限" placeholder="请输入" class="layui-input contractTimeLimit mustText" style="position:absolute;z-index:2;width:80%;" lay-verify="required" autocomplete="off">
    		<select type="text" id="contractTimeLimit" lay-filter="contractTimeLimit" bi="合同期限" autocomplete="off" class="contractTimeLimit mustText" lay-search>
    			<option value="1年">1年</option>
    			<option value="2年">2年</option>
    			<option value="3年">3年</option>
    		</select>
    	</div>
    </div>

//合同期限
    form.on('select(contractTimeLimit)', function(data) { 
    	if(data.value) { 
    		$('input[name=contractTimeLimit]').val(data.value)
    	}
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI0OTc1NA_size_16_color_FFFFFF_t_70]: /images/20221119/cc57dce0a7504c9e910d2bf9ef8e56ce.png

发表评论取消回复

表情：

评论列表（有 0 条评论，305人围观）

还没有评论，来说两句吧...

相关阅读

相关可下拉可输入的输入框实现方法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

今天药忘吃喽~/ 2023年01月08日 02:10/ 0 赞/ 306 阅读

相关【JavaScript】Select下拉列表可输入的模糊查询

这个是我用了三天的时间做出来，虽然在自己的项目中没有用到，但是感觉还是挺有成就感的，好东西就应该分享一下。。 div style="position:relative

迷南。/ 2022年09月24日 11:22/ 0 赞/ 270 阅读

相关可编辑的组合框JComboBox实现可删除,可添加下拉选项效果

参考文章：[可编辑的组合框JComboBox实现可删除下拉选项效果][JComboBox] [JComboBox监听回车键][JComboBox 1] LabelCell

亦凉/ 2022年09月10日 02:27/ 0 赞/ 191 阅读

相关 js校验输入框还可输入的字数

function checkLength(input) \{ // 获取可输入最大长度为140个汉字，一个汉字两个字符 var maxLength = 280;

超、凢脫俗/ 2022年08月06日 13:03/ 0 赞/ 196 阅读

相关 PHP实现可编辑查询下拉框

实现方式：EasyUI的combobox控件实现效果如下： ![Center][] \_\_\_\_\_\_![Center 1][] 实现过程如下：下拉框（sel

曾经终败给现在/ 2022年08月02日 10:48/ 0 赞/ 189 阅读

相关 input覆盖select实现可输入下拉框

<%@ page language="java" import="java.util.\" pageEncoding="UTF-8"%> <% String path

港控/mmm°/ 2022年06月10日 04:52/ 0 赞/ 218 阅读

相关 select2的输入可下拉（modal框）--gxy

html： <div class="form-group col-md-6 spanBox">

- 日理万妓/ 2022年06月02日 00:52/ 0 赞/ 525 阅读

相关下拉框（可输入+自动匹配）--gxy

地址来源： [https://www.cnblogs.com/brandonhulala/p/5990482.html][https_www.cnblogs.com_bra

川长思鸟来/ 2022年06月02日 00:19/ 0 赞/ 218 阅读

相关 EasyUI下拉列表中实现输入框不可手动输入

<input type="text" id="tfi\_type" class="easyui-combobox" data-options="prompt:'请选择数据类型'

朱雀/ 2022年05月25日 11:23/ 0 赞/ 242 阅读

相关 HTML实现可编辑下拉框

前言在HTML中下拉框是不能进行编辑的，我们可通过Select下拉框和input实现commbox功能思想：通过绝对定位实现input覆盖Select

墨蓝/ 2021年09月14日 14:30/ 0 赞/ 1018 阅读