layui 实现往 select 标签里面添加 option

最新推荐文章于 2024-02-02 09:51:22 发布

扫地鼠Gordon

最新推荐文章于 2024-02-02 09:51:22 发布

阅读量1.6k

点赞数

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/qq_28137309/article/details/131578131

版权

要使用Layui来往select标签中添加option，你需要使用Layui的form模块和jQuery库。请确保你已经引入了Layui和jQuery的相关文件。

下面是一个基本的示例，展示如何使用Layui和jQuery来往select标签中动态添加option：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.css">
  <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/layui/2.6.8/layui.all.js"></script>
</head>
<body>
  <select id="mySelect"></select>

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

      // 模拟需要添加的选项数据
      var options = [
        { value: 'option1', text: '选项1' },
        { value: 'option2', text: '选项2' },
        { value: 'option3', text: '选项3' }
      ];

      // 使用each循环遍历选项数据，并动态添加到select标签中
      $.each(options, function(index, option) {
        $('#mySelect').append('<option value="' + option.value + '">' + option.text + '</option>');
      });

      // 重新渲染select，以保证动态添加的option生效
      form.render('select');
    });
  </script>
</body>
</html>

扫地鼠Gordon

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
layui 实现往 select 标签里面添加 option

模块和jQuery库。请确保你已经引入了Layui和jQuery的相关文件。下面是一个基本的示例，展示如何使用Layui和jQuery来往。，你需要使用Layui的。要使用Layui来往。
复制链接

扫一扫