layui如何才能得到select的值

2023-10-08前端开发
564

layui得到select值的方法:首先打开相应的代码文件;然后引用layui插件;最后通过“var batch=$("#batch").val();”方法取得下拉框的值即可。具体代码如下:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>增加、修改学校/层次/专业</title>
  <link rel="stylesheet" href="layui/layui.css">
</head>
<body>
<div class="layui-fluid layui-form">
<form class="layui-form" action="" method="post">
<br>
          <div style="padding-left: 100px; padding-bottom: 20px;"><h2>{$rs1.title} >> {$rs.title}</h2></div>
          <div class="layui-form-item">
            <label class="layui-form-label">学费</label>
            <div class="layui-input-block">
              <input type="text" name="price" required  lay-verify="required" class="layui-input" value="{$rs.price}" readonly>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">批次</label>
            <div class="layui-input-block">
<select name="batch" id="batch" lay-filter="batch" lay-verify="required" lay-search="required">
                   <option value="">请选择批次</option>
                  {volist name="batch_rs" id="batch"}
    <option value="{$batch.id}" {if condition="$rsEdit.batch eq $batch.id"}selected{/if}>{$batch.title}</option>
    {/volist}
</select>  
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button type="button" id="editbatchschooltuition" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            </div>
          </div>
</form>
</div>
<script src="layui/layui.js"></script>
<script>
layui.use(['form', 'jquery'], function(){
  var form = layui.form
  ,$= layui.$;
  
// var batch=$("#batch").val();
   
form.on('select', function(data){
  console.log(data.elem); //得到select原始DOM对象
  console.log(data.value); //得到被选中的值]
  $("#batch").val(data.value)
  console.log(data.othis); //得到美化后的DOM对象
});  
   
  $('#editbatchschooltuition').on('click', function(){
  var batch=$("#batch").val();
  alert(batch);
layer.ready(function(){ 
  layer.open({
type: 2,
title: '增加',
maxmin: true,
area: ['750px', '400px'],
content: '{:url('main/addschool')}?id={$id}&price={$rs.price}&batch='+batch,
//content: '{:url('main/addschool')}',
cancel: function(){ //刷新网页
  }
  });
});
});
  
});
</script>
</body>
</html>
代码解析:

The End

相关推荐

layui实现图片上传成功后回显点击放大图片功能
layui实现图片上传成功后回显点击放大图片功能,html代码部分: !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-...
2025-09-06 前端开发
202

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示: 实现代码如下,在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150...
2025-09-04 前端开发
112

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考
我们在用到layui时候,需要点击文本输入框调起弹出选择框并选择内容,这个要怎么操作呢?以下两种方法可以参考: 1、点击名称,弹出信息弹框,选择表格中的某一行,实现效果如下: html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen...
2025-09-02 前端开发
167

js拖拽排序插件Sortable.js如何使用
由于项目功能需要,要实现对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好的满足这个需求,而且它还是开源的,于是乎就开始学习使用Sortable.js 特点 轻量级但功能强大 移动列表项时有动画 支持触屏设备和大多数浏览器(IE9及以下除外) 支持...
2025-06-12 前端开发
161

织梦dedecms搜索结果按点击排序的简单修改
DEDE默认的搜索功能,所得到的结果是按照文章加入的先后排序的 很多时候,我们希望得到的结果按点击数排序,点击多的排前面。 那么就修改这一个地方: include/inc_arcsaerch_view.php的大概第48行,将: $this-OrderBy = 'wmd_full_search.aid desc'; 改为...
2025-06-06 前端开发
202

xm-select多选下拉框实现拼音、首字母搜索匹配
最近项目中遇到需要下拉框能实现根据首字母进行模糊搜索,下拉框使用的是xm-select,而xm-select支持中文的搜索,后端接口也仅支持中文的。因此需要借助其他插件来完成功能。最终实现的效果如下: 涉及到的基础文件:引用 pinyin.js 和 initials.js。再引用 l...
2025-06-06 前端开发
89