JS 动态生成 select的option

原创已于 2022-11-17 14:51:34 修改 · 1.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

懒虫

收录于

PHP

当前文章被收录于：

PHP

106 篇文章 1 人学习

订阅专栏查看详情

当前文章被收录于：

63 篇文章 2 人学习

订阅专栏查看详情

数组

当前文章被收录于：

数组

4 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

于 2022-11-17 14:23:33 首次发布

本文介绍两种使用JavaScript动态生成HTML中select元素的option项的方法。第一种方法通过将PHP传递的JSON对象转换为数组并遍历来实现。第二种方法利用了JavaScript内置的Object.values()和Object.keys()方法来分别获取对象的所有值和键，并进行处理。

JS动态生成select的option

在这里插入图片描述

方法一：

//1、JS获取控制器传入的参数值：
  'papercharge' => json_encode($paper_charge),
//2、页面 JS
   $('.paper_charge').empty();
   var obj = <?php echo $papercharge;?>; //对象
   var arr = [];
   //对象 转数组
   for(let i in obj) {
     //arr.push (obj[i] )  //返回属性值
     //arr.push (i)  //返回键名
     arr[i] = obj[i]
   }
   //重新给select初始化option
   var obj = document.getElementById('paper_charge')
   for (var i=0; i< arr.length;i++) {
     obj.options.add(new Option(arr[i], i+1))
   }

方法二：

//1、JS获取控制器传入的参数值：

  'papercharge' => json_encode($paper_charge),
//2、页面 JS
   $('.paper_charge').empty();
   var obj = <?php echo $papercharge;?>; //对象
   var arr_value = Object.values(obj) 
   var arr_keys = Object.keys(obj) 
   //根据需要对arr_value arr_keys处理