layui-监听select事件

最新推荐文章于 2025-03-20 18:58:13 发布

原创最新推荐文章于 2025-03-20 18:58:13 发布

· 4.8k 阅读

4 ·

版权

文章标签：

#layui

该博客介绍了如何在HTML中使用layui框架创建一个下拉选择框，并通过JS监听select元素的选择事件。当用户选择特定选项时，会触发Ajax请求到'admin/activity/getprize'接口，传递选定的值进行数据交互。博客内容涉及到前端表单处理、layui组件应用以及Ajax通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML部分 (lay-filter=“demo”)

<div class="layui-form-item layui-hide">
        <label class="layui-form-label">动物级别</label>
        <div class="layui-input-inline">
          <select name="zoon_id" lay-filter="demo">
            <option value="" >点击选择</option>
            {volist name= "$zoon" id="vo"}
            <option value="{$vo.id}" {notempty name="$info.zoon_id"}{/notempty}>{$vo.zoonlevel}级</option>
            {/volist}
          </select>
        </div>
      </div>

JS部分

<script src="__PUBLIC__/layui/layui.js"></script><script>
    layui.use(['layer', 'jquery', 'form'], function () {
      var layer = layui.layer,
              $ = layui.jquery;
            form = layui.form;

      form.on('select(demo)', function(data){
        console.log(data.value);
          $.ajax({
              url:"{:url('admin/activity/getprize')}",
              data:{pid:id,level:data.value},
              type:'post',
              async: false,
              success:function(res) {
                 
              }
          })
      });
    });
</script>