select自定義值 · LayUI的學習

[TOC] ## 用LayUI eg: http://hongweizhiyuan.gitee.io/hongwei-test/layui/select/test2.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>select獲取自定義屬性值</title> <link rel="stylesheet" href="http://hongweizhiyuan.oss-cn-hangzhou.aliyuncs.com/layui/css/layui.css"/> </head> <body> <h2>select獲取自定義屬性值,用layui</h2> <div class="layui-form"> <select id="ddl" lay-filter="aihao"> <option value="100" emoney="12" gmoney="12" title="34.51">日卡</option> <option value="102" emoney="58" gmoney="58" title="34.51">月卡</option> <option value="103" emoney="518" gmoney="518" title="34.51">年卡</option> </select> </div> <script src="http://hongweizhiyuan.oss-cn-hangzhou.aliyuncs.com/layui/layui.js"></script> <script> //一般直接寫在一個js文件中 layui.use(['layer', 'form', 'jquery'], function () { var layer = layui.layer , form = layui.form , $ = layui.jquery; //方法：layui方法 form.on('select(aihao)', function (data) { console.log(data); //得到select原始DOM對象 console.log(data.elem); //得到select原始DOM對象 console.log(data.value); //得到被選中的值，100 console.log(data.othis); //得到美化后的DOM對象 console.log(data.elem[data.elem.selectedIndex].text); //可得到值，100 console.log(data.elem[data.elem.selectedIndex].title);//可得到值，34.51 console.log(data.elem[data.elem.selectedIndex].emoney);//不可得到值,undefined console.log(data.elem[data.elem.selectedIndex].getAttribute('emoney'));//可得到值，12,58 }); }); </script> </body> </html> ``` ## 只用jquery eg : http://hongweizhiyuan.gitee.io/hongwei-test/layui/select/test1.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>select獲取自定義屬性值</title> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script> <script type="text/javascript"> function ddl_change() { //方法一： //alert($('#ddl').find("option:selected").attr('emoney')); //方法二： alert($('#ddl option:selected').attr('emoney')); } </script> </head> <body> <h2>select獲取自定義屬性值，只用 jquery </h2> <select id="ddl" onchange="ddl_change(this);"> <option value="100" emoney="12" gmoney="12">日卡</option> <option value="102" emoney="58" gmoney="58">月卡</option> <option value="103" emoney="518" gmoney="518">年卡</option> </select> </body> </html> ```