layui菜单文本域实现联动

xiaodanda

于 2022-07-21 16:28:46 发布

阅读量455

点赞数

文章标签： layui 前端 javascript css

本文链接：https://blog.csdn.net/xiaodanda/article/details/125915008

版权

//html文本域
 <textarea class="layui-textarea"  id="pattern"   ></textarea>
//html 菜单
<div class="layui-panel" id="wrap"  >
  <ul class="layui-menu" id="docDemoMenu1" >
    <li lay-options="{id: 100}">
      <div class="layui-menu-body-title"  >列表111</div>
    </li>
    <li lay-options="{id: 101}">
      <div class="layui-menu-body-title"  >列表222</div>
    </li>
     <li lay-options="{id: 102}">
     <div class="layui-menu-body-title"  >列表222</div>
    </li>
  </ul>
</div>
 

//js文本域
//文本域 
$("#docDemoMenu1").on("click", "li", function(){
 $("#pattern").val($(this).text());
});
//js菜单
layui.use('dropdown', function(){
  var dropdown = layui.dropdown;
  //菜单点击事件，其中 docDemoMenu1 对应的是菜单结构上的 id 指
  dropdown.on('click(docDemoMenu1)', function(options){
    var othis = $(this); //当前菜单列表的 DOM 对象
     console.log(othis.context.innerText,"othisothis"); 
    //  console.log(options,"options")
  });
});