layui select 添加获取自定义属性

最新推荐文章于 2024-11-25 09:55:07 发布

前端菜鸟一枚

最新推荐文章于 2024-11-25 09:55:07 发布

阅读量6.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签： layui select

本文链接：https://blog.youkuaiyun.com/qq_40599116/article/details/82780835

js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用layui框架实现的分页功能案例。通过选择不同的每页显示数量，页面会根据所选选项进行重新加载，同时保持所选值的高亮状态。此功能利用了layui的form模块，并通过监听select元素的变化来触发页面跳转。

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

<select id="pz" name="pz" lay-filter="pz" type="select">
<option  data-href="'.$url.'&pz=10"   value="10">10</option>
<option  data-href="'.$url.'&pz=20"   value="20">20</option>
</select>


<script>
layui.use('form', function(){
     var $ = layui.jquery, form = layui.form; 

     //分页监听开始——————————————————————————————————
     form.on('select(pz)', function(data){

         //获取自定义属性值
	  var datahref=$(data.elem).find("option:selected").attr("data-href");
          location.href =datahref;       
     });  
    //默认赋值	 
     $("#pz").val("{$pz}");     
     form.render('select'); 	  
  //分页监听结束———————————————————————————————————
  
});