获取数组中的select选项
是指从一个数组中获取数据，并将其作为选项填充到HTML的select元素中。这样用户就可以从下拉列表中选择一个选项。
在前端开发中，可以通过以下步骤来实现获取数组中的select选项：
- 创建一个select元素：
<select id="mySelect"></select>- 获取数组数据： 假设有一个名为options的数组，包含了要作为选项的数据。
- 使用JavaScript遍历数组，并将数据添加为选项：
var select = document.getElementById("mySelect");
for (var i = 0; i < options.length; i++) {
var option = document.createElement("option");
option.text = options[i];
select.add(option);
}上述代码中，通过遍历数组，创建一个option元素，并将数组中的数据赋值给option的text属性。然后使用add方法将option添加到select元素中。
这样就可以将数组中的数据作为选项填充到select元素中了。
应用场景：
- 表单选择：当需要用户从多个选项中选择一个时，可以使用select选项来提供选择。
- 动态数据展示：当需要根据后台数据动态生成选项时，可以使用获取数组中的select选项来实现。
推荐的腾讯云相关产品和产品介绍链接地址：
- 云函数（Serverless Cloud Function）：https://cloud.tencent.com/product/scf
- 云开发（Tencent CloudBase）：https://cloud.tencent.com/product/tcb
- 云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
相关·内容
3回答
在我的select中设置默认文本有问题。(选项列表)。所以，我的选择是存储在数据库中。像varchar Test Option一样 现在，如果我在我的代码中这样做 <select name="category"> <option selected="selected"><?=$ad['category']?></option> <?php echo $options; ?> </select> 它可以工作，但在我的列表中有两个相同的值。我的完整代码。
浏览 23提问于2020-12-07得票数 0
回答已采纳
3回答
我有一个select元素，用户可以在其中添加和删除选项。当用户完成后，他们将单击保存，但我不知道如何从select中获取所有选项。我已经找到了JQuery来获得所有的选择，但我只是需要所有的。我试过这个：
var str = "";
$("#wordList").each(function () {
str += $(this).text() + ",";
});
alert(str);
但它只是将所有选项连接到一个以逗号结尾的长字符串。
浏览 1提问于2013-04-09得票数 2
回答已采纳
我的表：
Person belongs_to和房间has_many Person
我的collection_select
<%= collection_select(:inspection, :person_id, Person.involving(current_user), :id, :room_id) %>
如果我没记错的话，在HTML中，它将被表示为以下代码：
<select name="post[person_id]">
<option value="<%= person.id %>"
浏览 12提问于2016-08-23得票数 1
回答已采纳
是否有一种方法可以在一个调用中获得mysqli select语句的整个结果集(比如mysqli_fetch_all)，但作为一个对象数组(而不是一个关联数组的数组)？这样我就不用写这个了
$arr_objects = [];
while($obj = mysqli_fetch_object($result)){
$arr_objects[] = $obj;
}
浏览 7提问于2022-08-18得票数 2
我希望能够使用selectedOption的值，但只使用id值。本质上，就是selectedOption.id。除了当我使用selectedOption.id时，我得不到定义。
为什么会这样呢？我能做些什么来改变这一点。我附上了一张图片作为我正在谈论的数据的参考。此handleChange函数出现在Select组件中。
我的组件输出：
我的代码：
import React, { useState } from 'react';
import Select from 'react-select';
export default
浏览 5提问于2020-05-26得票数 0
我在一个表单上有一个Select2多选框，供用户选择他们以前访问过的国家。我使用的是Laravel 4，当表单提交时，它会验证所有表单域，如果出现任何验证错误，则会重定向回表单-使用用户以前的输入重新填充表单(使用input：：old(‘？’) )。
我的问题是，如何使用存储在Input：：Select2 (‘countries[]’)中的数据，将用户以前的选择重新应用于输入多选框？
在我的JavaScript代码中，我应该在哪里添加用户以前选择的ID？
$(document).ready(function() {
$('#inputCountries'
浏览 2提问于2014-02-04得票数 0
3回答
有相当多的方法可以做到这一点，我已经尝试了很多，但在进行自动化测试时，我无法从下拉菜单中选择一项。
"Select“是出现在下拉菜单中的默认选项，我希望自动测试选择其中一个元素，而不管是哪一个
这是HTML代码
<select class="form-control ng-pristine ng-invalid ng-invalid-required" ng-model="user.investmentAmount" required="" ng-class="{submitted:invalid}">
浏览 17提问于2017-04-19得票数 0
文档中没有太多关于如何在react select中使用setValue函数的内容。 这就是我的问题。在我的multiselect中，我有一些元素，如果选择了这些元素，其他元素就会失效。或者当选择了两个特定的元素时，那么第三个元素是必须选择的。 所以我做了一个if。我有一个裁判，所以它看起来像这样： if(selectInputRef.current){
if(selectInputRef.current.select.hasValue('optionA')){
selectInputRef.current.select.clearValue();
浏览 66提问于2021-02-04得票数 1
2回答
我使用jQuery监听对<select multiple>元素的更改。有没有办法从给定的事件中确定select中的哪些选项已经更改(被选中或取消选中)？
我知道我可以遍历select的子元素来找出哪些被选中了，但是我特别需要知道在事件发生时哪些元素刚刚被改变了。
因此，例如，如果select包含选项{ A, B, C }，我需要能够辨别用户何时按住控件并单击以将B添加到选择中，或者何时用户正常单击以将选择从{ A, B }更改为单独的C。
浏览 1提问于2011-10-11得票数 0
回答已采纳
1回答
下面的代码与我一起使用来传递整个select元素：
Jquery：
$(“.btn”).click(函数() { var值= $('#id_cat选项‘)；var optionsData =$.map(值，函数(选项){返回option.text；})；$.ajax({ type：" post "，url：“/Products/text 03”)，数据类型："text"，data: JSON.stringify(optionsData)，//将此变量传递到post请求为'options‘contentType："application
浏览 2提问于2016-04-14得票数 0
回答已采纳
1回答
我希望选择第一个标记下面的每个<option>标记，并且只需要值和</option>之间的文本。我尝试做了以下几件事； $('#attributesize-size_uswomen > option') 但是，它只给了我第一个<option>。我想排除第一个<option>标记并获取值。这是我想要的HTML代码块。 我想要获得‘源’大小，即6，6.5等。谢谢 <select name="size_attribute[size]" id="attributesize-size_uswomen&#
浏览 16提问于2020-10-22得票数 1
我正在使用动态选择框和在数据库中获取数据，但我有一个很大的问题，我不能解决，谁能告诉我或纠正我在这里写的错误。因为每次我尝试提交按钮时，只有Product_id保存在数据库中，这是我的代码，我希望它们是Product_name，Product_quantity Product_unit，Product_price，它们将存储在数据库中，而不是product_id。
delivery_form.php
<form class="form-horizontal" method="POST" action="deliveryformsave.php
浏览 0提问于2018-09-26得票数 0
2回答
我的html代码。
<input type="button" onClick="show($row['empDesignation']?>');" value="update"/>
因此，当我单击更新按钮m，将值传递给javascript时
<script type="text/javascript">
function show(desig){
document.getElementById("designation").value=desig
浏览 1提问于2014-02-13得票数 1
我有一个在运行时填充的select_list。我需要根据项目索引选择一个值。
例如：
self.myselectlist1.option(indexval).select
如果我传递的索引是3，它应该选择第三项。
以上代码错误退出。有别的办法吗？
浏览 0提问于2013-12-03得票数 0
回答已采纳
1回答
我试图让我的web应用程序从我的数据库中显示一个下拉列表，但它没有将数据分离在单独的选项标签中，我尝试了各种方法，包括forEach方法，但没有成功，这是我的代码现在的样子，它当前显示数据库，但不是以我想要的下拉列表格式。
app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser'
浏览 10提问于2021-03-03得票数 0
我能够在javascript中完成以下操作：
document.querySelector('select[name="plan_type"] option')
但是，我如何获得所选的选项？例如：
document.querySelector('select[name="plan_type"] option:selected')
( jquery中的等价物是：$('select[name="plan_type"] option:selected')。
浏览 2提问于2018-10-11得票数 0
回答已采纳
1回答
我试图使用jquery隐藏SELECT中的所有选项，但在平板电脑上不起作用。代码如下所示：
index.html
<select id="especialidad" name="especialidad">
<option>Selecciona una opción...</option>
<option value="v1">Análisis clínicos</option>
<option value="v2">Medicina
浏览 2提问于2013-10-29得票数 0
1回答
我有一个下拉列表，其中包含了用像这个{{'January' | translate}}这样的管道翻译的几个月
我想在下拉列表中绑定我的月份，这里是我的html和my months对象：
<select class="small">
<option selected="selected">--{{ 'Year' | translate | capitalize }}--</option>
<option *ngFor=".."></option&g
浏览 2提问于2016-09-20得票数 1
回答已采纳
我已经成功地在Angular中使用GET方法获取数据。但是，现在我想将这个获取的值作为选项放在select form中，但我无法弄清楚。
有什么解决方法吗？
浏览 9提问于2018-01-24得票数 0
我尝试对要添加到组中的公司进行选择，然后在数据库中进行连接。我对“超文本标记语言”的代码有点不了解。我在Laravel工作
<select id="selectCmp" class="selectpicker" data-live-search="true" multiple title="Select structures">
@foreach($allCompanies as $company)
<option value="{{$company->id}}"&g
浏览 0提问于2017-06-28得票数 5
2回答
这是我的代码。我正在尝试设置数据库中select标签的值。但它并没有像预期的那样工作。我的要求网是value='Auto‘，那么应该选择第0个索引，否则应该选择1sst索引。但事情不是这样发生的。有人能帮帮我吗？
<div class="form-group">
<label class="medium mb-1" for=""> Select Mode of Update </label>
浏览 0提问于2020-08-31得票数 0
由于在DOM上创建/删除许多<option>标记成本很高，所以我在Select2 4.0中寻找一种使用大型本地JSON和无限滚动的方法。我还希望能够正确地获取/设置/更新值。有 (我提供了一个泥泞的解决方案)，但是我的解决方案有两个问题：
我可以清除单个源select中未选中的选项，并且Select2控件不会中断。这使不必要的选项无法在源select中生成(因为我使用本地JSON数组来处理数据)。但是，如果我尝试对多个选择执行相同的操作，这将破坏Select2中的功能。请参阅jsFiddle示例中的本节：
如果(！this.$element.prop(‘multiple’)){
浏览 3提问于2015-11-10得票数 1
回答已采纳
2回答
我正在使用“图像拾取器”插件，我想获得所有选项的所有"data-image-src“。下面是我的代码：
<select class="image-picker show-labels show-html" multiple="multiple">
<option value="9122" data-image-src="www.first.com/first.jpg">
First
</option>
.
.
.
</select>
我可以使用
浏览 2提问于2015-04-21得票数 2
2回答
假设我有下面的下拉列表。
<select id="products">
<option value="test1">Test1</option>
<option value="test2">Test2</option>
</select>
我只想在选择特定选项时才显示特定的div，我知道如何显示和隐藏它们，但我不知道如何检测。
当页面加载时，选择所选选项，当用户选择其他内容时，选择所选选项。
浏览 2提问于2012-04-28得票数 1
回答已采纳
我使用Symfony Twig模板在我的输入中有一个标签列表，如下所示： <select id="choices-multiple-remove-button" class="form-control" name="choices-multiple-remove-button" placeholder="Compétences" multiple>
{% for skill in skills %}
<option value="{{skill.id}}">{
浏览 13提问于2019-04-10得票数 1
回答已采纳
在一个数组中，我将其显示为一个组件(Box.js)上的列表，并存储在另一个组件(Search.js)中的react-select中。它们都是属于父组件(trial.js)的同一级别的子项。
最终，我希望通过从列表中单击或从react-select中更改/选择来显示对象。我已经将事件处理程序提升到它们的父级，并成功地独立显示了所选对象。
但是，我似乎无法将onClick与onChange同步。具体来说，我希望click事件处理程序将选定列表设置为粗体，并更改react-strap中显示的项，反之亦然。react主页中给出的提升状态和同步事件处理程序示例使用文本输入，这对我正在尝试做的事情没有真正
浏览 7提问于2018-09-07得票数 0
2回答
因此，我有一个简单的选择形式如下：
<select>
<option value=''>1st db</option>
<option value=''>2nd db</option>
</select>
我使用PDО获取服务器上的所有可用数据库，从而列出所有数据库。现在，我的问题是，如何将每个数据库附加到相应的选项值中，以便以后可以选择它进行进一步的“操作”。
例如：
<select>
<option value='<?php firstdb ?
浏览 3提问于2013-08-13得票数 1
我正在尝试使用php显示月份和相应的诞生石。我使用了一个关联数组来动态填充select的选项，并且已经打印了生日石，但是我似乎不知道如何访问选项名称来显示月份。这是我已经交上的作业(其中，我已经满足了要求。我想找出不必要的部分。 在访问选项name=的值时，谁能给我指出正确的方向？“” 谢谢! <html>
<body>
<div>
<h1>Birthstones by Month</h1>
<p>Select a Month from the dropdown to r
浏览 36提问于2019-10-09得票数 0
我正在使用ZendFramework2开发一个应用程序，我使用两个选中的多个框。第一个由数据库中的数据填充，第二个是空的。
我打算在两个选项的第一个选项中将禁用属性设置为“禁用”。这样，第一个选项将是不可用和不可点击的。因此，在使用add/remove按钮时，用户将无法将这些第一选项从一个选择传递到另一个选择。
选择1
<select id="AttributesId" multiple="multiple" size="7" title="Select an Attribute" name="idAttrib
浏览 6提问于2012-10-16得票数 3
回答已采纳
我需要传递菜单项所选onChange的索引，但不知道如何访问它。 const handleListChange = (e) => {
console.log('Item Index: ', e.target.key);
}
<TextField
select
label="Select item"
value={show}
onFocus={getListArray}
onChange={e => handleLi
浏览 13提问于2021-07-16得票数 0
回答已采纳
2回答
我正在尝试在select下拉列表中随机排列选项的一部分。保留第一个选项优先，后两个选项最后。
<select class="form-control" id="return-reason">
<option value="" disabled="disabled" selected="selected">Please select...</option>
<option>Option 1</option>
<option>
浏览 2提问于2017-09-28得票数 2
我有一个带有javascript.In的html搜索应用程序，我使用了select &option(选择框).I想要从access数据库检索值到selectbox.How，我可以用数组来做这件事吗?我还想得到下面option.The的计数不工作correctly.How可以我做this.any一个知道，请帮助me.Thank你。
var myselect=(selinstal.value);
for(var i=0;i<(select2.option.length);i++)
{
myarray[i]=myselect;
rs(myarray);
/
浏览 1提问于2009-12-18得票数 0
我有一个带有选择框的表单，如下所示：
<select id="school">
<option>Choose school</option>
<option value="656462">test</option>
<option value="653671">test1</option>
<option value="653688">test2</option>
</sel
浏览 2提问于2013-10-15得票数 0
回答已采纳
1回答
我使用下面的html获取默认禁用选项“selected”作为占位符。
<select name="town">
<option selected disabled value="xx">-- Select a town --</option>
<option value="1">Paris</option>
<option value="2">London</option>
<option value="
浏览 0提问于2018-12-17得票数 1
1回答
我正在尝试从mysql数据库表中获取两个变量，一旦用户选择了下拉选项，该表就会自动填充。
下拉菜单将显示团队的列表，一旦团队被选中，输入框将显示队长和副队长的名字(实际上，它只会在后端捕获他们的MemberID并将其保存在表中)。
我已经能够使用Javascript函数和Ajax来获取一个船长的名字。这部分运行得很好。
我要的是弄到第二个船长的名字/身份证。
我的HTML/PHP代码如下：
<script type="text/javascript" src="js/capt-dropdown.js"></script>
...
浏览 1提问于2018-07-03得票数 0
$(this).find('select option:selected').each(function (i, val) {
var selectedValue = $(val).val(); //this returns the text from the option instead of the value
});
这是ie7中的已知问题吗？我没有找到任何关于它的信息吗？可能的变通方法？谢谢
浏览 3提问于2012-04-24得票数 4
回答已采纳
我有Struts1.2bean，如下所示，它包含数组中的位置
Register.java
public class Register extends ActionForm
{
private String[] userLocation = {"Chennai", "Bangalore", "Delhi", "Singapore"};
.
.
//Getters and Setters
.
.
.
}
我想在选项中的下拉select中填充这个选项，我尝试了下面的代码，但是它不知道如何做worki
浏览 3提问于2013-05-17得票数 1
回答已采纳
3回答
假设我有这样的代码：
<select id="select" multiple="multiple">
<option value="A1">abc</option>
<option value="A2">cde</option>
<option value="A3">efg</option>
</select>
和一个数组：
var selected = ["A1", "A3"];
浏览 9提问于2017-01-21得票数 1
回答已采纳
我试图在项目中比较jQuery和JavaScript之间的差异，但我似乎不知道如何重写一个函数，因为我不确定应该如何引用jQuery对象。我连接了一个字符串作为AJAX参数传递。下面是JavaScript：
function getSelectValues(select) {
var values = "";
var sep = "";
for(var i = 0; i < select.length; i++) {
if (select.options[i].selected) {
values += sep + (sel
浏览 1提问于2012-06-20得票数 0
回答已采纳
我有这样的表格
<label>Select country</label>
<select name="country">
<option value="IND" selected="selected">India</option>
<option value="MY">Malaysia</option>
<option value="US">United st
浏览 1提问于2015-03-31得票数 6
回答已采纳
我在从数据库表中获取数据时遇到了问题，在使用foreach将数据加载到数组和循环后，它返回空白而不是值。我已经尝试过使用这种方法，它工作得很好，但是我想使用这个操作数->，但是它提取的是存储体数据。
$query = "SELECT * FROM pages_words";
$select_posts = mysqli_query($connection, $query);
$rows[] = array();
while ($row = mysqli_fetch_assoc($select_posts))
$rows[] = $row;
foreach ($row
浏览 3提问于2020-02-24得票数 0
1回答
我目前的表结构如下：
Questions
* id
* prompt
Options
* id
* name
* image
Question Assignments # Acts as a join table for the tables above and holds #
# a boolean of whether an option is "correct" or not. #
* question_id
* option_id
* correct
假设我们将当前的信息
浏览 3提问于2014-01-22得票数 1
回答已采纳
我开发了两个选择框-一个控制另一个的可见性。On page load controlled选择框(#select02)功能与我想要的完全一样，只要我不显示/隐藏问题(#select02)中的选择框，在controlled选择框(select01)中选择选项即可。
一旦我这样做了--控制的复选框中的所有功能都将停止运行。
因此，我的问题是-如何维护"controlled"复选框(#select02)，在显示/隐藏后的的功能？
对于那些喜欢强制直播的人来说.HTML：
<div>
<h1>The controlling box</h1>
<
浏览 2提问于2015-05-08得票数 0
回答已采纳
1回答
未动态更新的下拉式值
、、、、
我是新来的，所以这个问题可能有点傻。我试图从后端获取下拉值。我面临的问题是，即使在异步等待函数返回项之后，程序也没有将项目填充到列表中。任何帮助都将不胜感激。
从后端加载数据的代码：-
getDataSources = => () =>{ try { return axios.post("，{ headers：{ "content-type"："application/json“}} )；} catch (e) { console.log(e)；}；
对于下拉列表，我有以下代码：-
var selectSources = [];
浏览 3提问于2020-06-24得票数 2
回答已采纳
我是google地图的新手，我有一个带有多个标记的地图，我想使用下拉菜单在它们之间切换。
我使用下面的代码来填充带有标记标题的下拉菜单：
// select a marker from dropdown menu
$("select#mySelect").change(function(){
gotoMarker($(this).val());
});
function makeMarkerList() {
var options = "";
$("select#mySelect").empty(
浏览 0提问于2013-04-18得票数 0
回答已采纳
我在重新填充下拉列表时遇到了问题。我有一个代码来填充fecth上的dropdown。它在select标签中有3个选项。现在我有了一个“刷新服务器”的按钮。它再次调用fetch function。我正在尝试on click remove选择标签中的所有选项，并重新填充它。这是我的代码
for (let i = length - 1; i >= 0; i--) {
select.remove(i);
}
setTimeout(fetchUrl, 1000);
我的问题是，我删除了前面的3个选项，但它使得具有相同values.It的6个选项应该是这样的：
Opt
浏览 0提问于2021-05-03得票数 0
1回答
我想查看包含JSON格式数组的控制器中的数据，但不幸的是，我被困在这里了。场景就是这样的。
我有一个使用Datatable网格的表，我用默认的20行填充了表的行，每行都包含dropdown select2，它工作得很好。当我想要预览包含20行的默认表中的特定数据时，问题就来了。
这是我的控制器，它提供由用户想要的特定数据触发的json数组：
public function getSpecData($filter="get")
{
$filter = str_replace('_','/', $filter);
$que
浏览 2提问于2019-11-20得票数 2
4回答
我有以下选择：
var squad_name= $("#squad option:selected").text();
后面的HTML如下所示：
<div id="squad">
<label>Squad Type:</label>
<select id="choosesquad">
<option value ="0">Choose squad</option>
</select>
<inpu
浏览 0提问于2011-01-18得票数 1
回答已采纳
1回答
我试图将数组的SQL结果转换为字符串，以便在日期变量之间使用变量。但是，我一直收到“stdClass类的对象不能转换为字符串”错误。我试过将绳子内爆，但我一直在搞错。我对内爆的理解是，它将将数组变量转换为字符串。
PHP代码(我是根据一个查询返回一个低日期，该查询从用户输入的单个日期动态生成日期)：
get_results("SELECT low_date FROM (SELECT low_date FROM (SELECT @row:=0) temp, (select * from (select adddate((SELECT main.date FROM (SELECT DAT
浏览 0提问于2020-02-23得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
