首页 > 其他分享 >layui下拉框可手动输入

layui下拉框可手动输入

时间:2023-11-08 18:45:50浏览次数:32  
标签:form layui 手动 value var data 下拉框 select

先看效果

layui版本:[email protected]

HTML代码:

<div class="layui-form-item">
    <label class="layui-form-label">关键词:</label>
    <div class="layui-input-block">
        <!--lay-verify="required"-->
        <input type="text" id="input_id_key" name="key" placeholder="请输入关键词,为空则查询全部"
               autocomplete="off" class="layui-input"
               style="position:absolute;z-index:2;width:95%;">
        <select type="text" id="hc_select" lay-filter="hc_select" autocomplete="off"
                placeholder="移交单位全称" class="layui-select">
            <option value="洪水">洪水</option>
            <option value="风雹">风雹</option>
            <option value="地震">地震</option>
            <option value="野火">野火</option>
            <option value="干旱">干旱</option>
            <option value="滑坡">滑坡</option>
            <option value="火山">火山</option>
            <option value="高温">高温</option>
            <option value="低温">低温</option>
        </select>
    </div>
</div>

JS代码:

layui.use(function () {
    var form = layui.form;
    var layer = layui.layer;
    // select 事件
    form.on('select(hc_select)', function (data) {
        var elem = data.elem; // 获得 select 原始 DOM 对象
        var value = data.value; // 获得被选中的值
        var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
        $('#input_id_key').val(value);                
    });
});

 

end.

标签:form,layui,手动,value,var,data,下拉框,select
From: https://www.cnblogs.com/xujiecnblogs/p/17818064.html

相关文章

  • 手动添加依赖的jar文件到maven仓库
    在编写maven项目的程序时,有时程序需要依赖于某一个类库jar文件。但是由于maven远程仓库并不含有该文件,所以不能利用maven自身插件自动在其远程仓库下载。我们需要手动将其添加到本地的仓库中,这样才能编译依赖于这个类库的工程。-----------------------------------------------......
  • Maven项目手动配置依赖项
    1.问题很多时候,我们依靠其本身的识别功能,并不能很好的识别依赖项(尤其是指定版本),且对于一些位于<\build>不能自动去下载,这时候我们就要去手动配置依赖项2.解决2.1首先进入Maven官方网站MavenRepository2.2找到自己需要手动配置的相应项目2.3将artifactId一项的名字输入......
  • javascript 手动实现 bind,call,apply
     js手动实现call方法Function.prototype.myCall=function(content,...args){letmyfn=Symbol()content=content||globalThis//console.log(content)content[myfn]=this//console.log(content)constresu......
  • el-select 下拉框全选、多选的几种方式组件
    组件一、基础多选<template><el-selectv-model="value1"multipleplaceholder="请选择"><el-optionv-for="iteminoptions":key="item.value":label="item.label":value=&qu......
  • 手动剃须刀设计 ——LW
    近年来,小家电逐渐渗入到我们的生活中,使用中的细节改变了我们的生活质量。与传统外观单调、性能单一的剃须刀产品相比,今天的剃须刀在高科技氛围中呈现出一个全新的世界:延长寿命,防漏系统和自动安全全身清洗、安全可靠性、人性化设计和自动清洗装置也使剃须刀更耐用。外观上,新的手动剃......
  • Layui自定义icon图标
    在使用Layui进行开发时,会使用:<iclass="layui-icon">&#xe60c;</i>或者<iclass="layui-iconlayui-icon-face-smile"style="font-size:30px;color:#1E9FFF;"></i>进行图标的引入,但是官方给的图标毕竟有限,有时候没有自己想要的,但在阿里巴巴矢量图标库(ht......
  • Win10手动升级到Win11最新版、无TPM等任何限制并且可保留文件、设置和应用升级的最新
    有很多朋友想从WIN10升级到WIN11,但有很多电脑无法满足WIN11的升级要求:如电脑不支持TPM2.0、不支持安全启动、不支持处理器等,同时原WIN10系统安装了很多程序和应用设置,所以无需重作系统、无任何限制并且可保留文件、设置和应用,那么从WIN10升级到WIN11就是最好的解决办法了。如果电脑......
  • 手动签发token(多方式登录:用户名、手机号、邮箱)
    要求登陆数据格式#使用用户名,手机号,邮箱,都可以登录##前端需要传的数据格式{ 用户名/手机号/邮箱"username":"lqz/1332323223/[email protected]","password":"lqz12345"}序列化类中ser.pyfromrest_frameworkimportserializersimportrefromrest_framework.exce......
  • Jenkins手动安装低版本插件
    一问题用的低版本jenkins,不支持高版本的插件,需要手动安装适配的低版本插件jenkins--2.346.1二解决https://zhuanlan.zhihu.com/p/647731370  http://updates.jenkins-ci.org/download/plugins/......
  • 分享一个HTML页面适配方式:用户手动缩放
    <metaname="viewport"content="width=device-width,initial-scale=1.0">这个配置告诉浏览器自动将页面的宽度设置为设备的宽度(通常是屏幕宽度),并将初始缩放比例设置为1.0。这通常用于确保网页在移动设备上以完整的屏幕宽度显示,而不需要用户手动缩放或调整。<metaname="viewpo......