Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用JavaScript的数组中的两个下拉列表值?

使用JavaScript的数组中的两个下拉列表值?

提问于 2018-01-14 17:25:43
回答 2关注 0查看 298

简单问题:我想用JavaScript在HTML中的两个下拉列表中循环数组值。但只有一个下坠起作用了。这个代码有什么问题?

代码语言:javascript
运行
AI代码解释
复制
var select = document.getElementById("selectNumber");
var select2 = document.getElementById("selectNumber2");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
    select2.appendChild(el);
}
代码语言:javascript
运行
AI代码解释
复制
<select id="selectNumber">
    <option>Choose a number</option>
</select>
<select id="selectNumber2">
    <option>Choose a number</option>
</select>

回答 2

fly_with_heart

发布于 2018-01-15 02:42:58

你可以为每个选择创建一个选项元素,appendChild复制元素,所以第二个append从第一个元素开始

代码语言:javascript
运行
AI代码解释
复制
var select = document.getElementById("selectNumber");
var select2 = document.getElementById("selectNumber2");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
  var opt = options[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
   var el1 = document.createElement("option");
  el1.textContent = opt;
  el1.value = opt;
  select.appendChild(el1);
  select2.appendChild(el);
}
代码语言:txt
AI代码解释
复制
<select id="selectNumber">
  <option>Choose a number</option>
</select>
<select id="selectNumber2">
  <option>Choose a number</option>
</select>

乐乐22

发布于 2018-01-15 01:41:15

不要对两个控件使用相同的元素。先复制

代码语言:javascript
运行
AI代码解释
复制
var select = document.getElementById("selectNumber");
var select2 = document.getElementById("selectNumber2");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
  var opt = options[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select.appendChild(el);
  select2.appendChild(el.cloneNode(true));
}
代码语言:javascript
运行
AI代码解释
复制
<select id="selectNumber">
  <option>Choose a number</option>
</select>
<select id="selectNumber2">
  <option>Choose a number</option>
</select>
和开发者交流更多问题细节吧,去 写回答
相关文章
Javascript中数组的使用
Array在Javascript程序开发中是一个经常使用到。一个数组可以存储Javascript支持的任何数据类型。 1.基本知识点 //创建一个对象并初始化它 var preInitArray = new Array("First Item", "Second Item", "Third Item"); for (var i = 0; i < preInitArray.length; i++) { console.log(preInitArray[i]); }
八哥
2018/01/18
9.2K0
如何删除 JavaScript 数组中的虚值[每日前端夜话0x55]
翻译:疯狂的技术宅 原文:https://medium.freecodecamp.org/how-to-remove-falsy-values-from-an-array-in-javascript-e623dbbd0ef2
疯狂的技术宅
2019/05/06
11.5K0
如何删除 JavaScript 数组中的虚值[每日前端夜话0x55]
pyqt中QTableWidget里的下拉列表
有时候我们希望在QTableWidget的单元格中进行下拉列表的选择,就像excel里面这样。那么怎么设置呢?怎么实现读和写呢?特别是在pyqt中,在c++中,网上已经有很多例子了。
钱塘小甲子
2019/08/15
4.3K0
Javascript获取select下拉框选中的的值[通俗易懂]
<select id=”test” name=””> <option value=”1″>text1</option> <option value=”2″>text2</option> </select>
全栈程序员站长
2022/11/17
8.4K0
访问列表中的值
#!/usr/bin/python list1 = ['physics', 'chemistry', 1997, 2000] list2 = [1, 2, 3, 4, 5, 6, 7 ] print "list1[0]: ", list1[0] print "list2[1:5]: ", list2[1:5]
用户8442333
2021/05/27
7.1K0
Javascript中的数组
数组的定义: var colors = new Array(20); var colors = new Array('red');  // ['red'] var colors = ['red', 'green']; 判断变量是不是数组: colors instanceof Array;  //true Array.isArray(colors); //true 将数组转化为字符串: colors.toString(); // 'red,green' colors.join(' ')
宅蓝三木
2018/02/07
3.6K0
Javascript获取数组中的最大值和最小值的方法汇总
比较数组中数值的大小是比较常见的操作,下面同本文给大家分享四种放哪广发获取数组中最大值和最小值,对此感兴趣的朋友一起学习吧 比较数组中数值的大小是比较常见的操作,比较大小的方法有多种,比如可以使用自带的sort()函数,下面来介绍如下几种方法,代码如下: 方法一: //最小值 Array.prototype.min = function() { var min = this[0]; var len = this.length; for (var i = 1; i < len; i++){ if (this
前朝楚水
2018/04/02
8.6K0
html下拉框设置默认值_html下拉列表框默认值[通俗易懂]
HTML 和 JavaScript 综合练习题一、单项选择 1. Web 使用( D )在服务器和客户端之间传输数据。 A.FTP B. Telnet C. E-mail D. HTTP 2. HTTP 服务默认……
全栈程序员站长
2022/11/15
35.3K1
Gas 优化:Solidity 中的使用动态值数组
在 Datona 实验室的 Solidity 智能数据访问合约(S-DAC)模板的开发和测试过程中,我们经常需要处理一些像用户ID这样数据小但未知长度的数据。理想情况下,这些数据存储在一个小数值的动态值数组中。
Tiny熊
2021/12/13
3.9K0
flutter的列表下拉刷新
flutter的列表下拉刷新需要借助一个组件来实现,这个组件的名字是RefreshIndicator,直译过来就是刷新指示灯。
挥刀北上
2021/01/07
5.4K0
flutter的列表下拉刷新
在jquery中用下拉框列表显示默认的值
1、在postUpdate.jsp中添加js如下: <script type="text/javascript"> $(document).ready(function(){ var qx_value = $('#qx_select_value').val(); $("#qx_select option[value='"+qx_value+"']").attr("selected", "selected"); }) </script> 核心代码就这一句话: $("
qubianzhong
2018/08/10
4.3K0
JavaScript 修改数组对象的 key 值
原数组对象: 修改数组对象的 key 值 let objArr = [ { name: "Rick", age: 14, }, { name: "Morty",
Leophen
2020/12/23
6.8K0
JavaScript 修改数组对象的 key 值
JavaScript中的数组创建
数组是一个包含了对象或原始类型的有序集合。很难想象一个不使用数组的程序会是什么样。
疯狂的技术宅
2019/03/27
4.2K0
6 - JavaScript 中的数组
原文地址:https://dev.to/bhagatparwinder/arrays-in-javascript-5fc7
前端黑板报
2022/04/19
2K0
6 - JavaScript 中的数组
javascript数组怎么定义_js中的数组
每一门编程语言,都有数组或类似数组的结构,同样的JavaScript(虽然是脚本语言)也不例外,学习JavaScript的数组,我们从新建第一个数组开始:
全栈程序员站长
2022/11/10
4K0
javascript数组怎么定义_js中的数组
[Excel技巧]创建下拉列表
在单位用Excel做统计,想偷个小懒,比如食品一栏。能不能设计一个下拉列表,直接在列表框中选择,省去键盘的重复输入呢?
卷福同学
2023/04/28
2.8K0
[Excel技巧]创建下拉列表
Java 下拉列表
import java.awt.Container; import java.awt.FlowLayout; import java.awt.Font; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.ComboBoxModel; import javax.swing.DefaultComboBoxModel; import javax.swing.JButton; im
用户2965768
2019/03/04
3.5K0
AngularJS 使用ngOption实现下拉列表
最近使用到了ngOption实现下拉选择列表,由于需要实现分组等功能,百度了下没有太好的文章,就百度到一篇英文的帖子,按照其中的代码很顺利的搞定了。 本篇根据文中代码,详细讲述下如何实现下拉列表 更多内容参考:AngularJS知识总结 下拉列表的简单使用 ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定的值; 另一个是ng-options用于确定下拉列表的元素数组。 <select ng-model="engineer.currentActivity"
用户1154259
2018/01/17
2.5K0
AngularJS 使用ngOption实现下拉列表
取两个列表的交集_js两个数组取差集
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/10
3.8K0
点击加载更多

相似问题

如何使用JavaScript在下拉列表中获取选定的值?

2188

如何使用JavaScript在下拉列表中获取选定的值?

2174

如何使用JavaScript在下拉列表中获取选定的值?

2179

如何使用JavaScript在下拉列表中获取选定的值?

2204

如何使用JavaScript在下拉列表中获取选定的值?

2139
相关问答用户
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档