gpt4 book ai didi

javascript - 如何将多个选择的值分配给javascript中的变量

转载 作者:行者123 更新时间:2023-11-28 08:45:04 25 4
gpt4 key购买 nike

下面的 js 代码可以在按下按钮时动态添加另一个“选择”元素。问题是如何将每个选择值分配给变量?

这对于第一次选择效果很好

var y=document.forms["myForm"]["badge[]"].value;

但对于以下选择则不然。我尝试在括号内添加 1,如下所示,但取消定义时出错。

var y=document.forms["myForm"]["badge[1]"].value;

JavaScript

<script>

var choices=[];
choices[0]="--Select a badge--";
choices[1]="Thank you";
choices[2]="Above and Beyond";
choices[3]="Bookworm";
choices[4]="Constructive Feedback";
choices[5]="Employee of the Month";
choices[6]="Fantastic Idea";
choices[7]="Great Attitude";
choices[8]="Great Turnaround";
choices[9]="Great Work";
choices[10]="Helping Hand";
choices[11]="I am Successfactors";
choices[12]="I am Sykes";
choices[13]="I am your Fan";
choices[14]="Successfactors Wizard";
choices[15]="Speedster";
choices[16]="Stepping up";
choices[17]="Teamwork";
choices[18]="1st Place";

var value=[];
value[0]=0;
value[1]=39;
value[2]=34;
value[3]=29;
value[4]=33;
value[5]=25;
value[6]=36;
value[7]=27;
value[8]=28;
value[9]=37;
value[10]=35;
value[11]=24;
value[12]=23;
value[13]=38;
value[14]=31;
value[15]=40;
value[16]=30;
value[17]=32;
value[18]=26;

function addInput(divName){
var newDiv=document.createElement('div');
var selectHTML = "";

selectHTML="<select id='badge[]' name='badge[]' >";

for(i=0; i<choices.length; i=i+1){
selectHTML+= "<option value='"+value[i]+"'>"+choices[i]+"</option>";
}
selectHTML += "</select>";
newDiv.innerHTML= selectHTML;
document.getElementById(divName).appendChild(newDiv);


}

HTML

<html>

<form name="myForm" onsubmit="return validateForm()" action="<?php echo $destination_url; ?>" method="post" />
<select id="badge[]" name="badge[]">
<option value="0">--Select a badge--</option>
<option value="39">Thank you</option>
<option value="34">Above and Beyond</option>
<option value="29">Bookworm</option>
<option value="33">Constructive Feedback</option>
<option value="24">I am Successfactors</option>
<option value="25">Employee of the Month</option>
<option value="23">I am Sykes</option>
<option value="36">Fantastic Idea</option>
<option value="27">Great Attitude</option>
<option value="28">Great Turnaround</option>
<option value="37">Great Work</option>
<option value="35">Helping Hand</option>
<option value="38">I'm your Fan</option>
<option value="31">Successfactors Wizard</option>
<option value="40">Speedster</option>
<option value="30">Stepping up</option>
<option value="32">Teamwork</option>
                                  <option value="26">1st Place</option>

</select>
<div id="dynamicInput"></div><input type="button" value="Add another one?" onclick="addInput('dynamicInput');" />
<p>Reason: <span style="color: red;">(This is a required field)</span></p>
<textarea rows="4" cols="50" name="reason" id="reason"></textarea>

<input type="submit" value="Give" class="button medium-btn" />
</form>
</html>

最佳答案

我不确定这是否是您想要的,但请尝试以下操作:

HTML:

<head>
<script src="script.js"></script>
</head>

<body>
<div id="myDiv"></div>
<br/>
<button onclick="addInput('myDiv')">Show select</button>
<br/>
<div id="myResult"></div>
<br/>
<button onclick="displayResult('myResult')">Show result</button>
</body>

</html>

JavaScript:

var choices = [];
choices[0] = "--Select a badge--";
choices[1] = "Thank you";
choices[2] = "Above and Beyond";
choices[3] = "Bookworm";
choices[4] = "Constructive Feedback";
choices[5] = "Employee of the Month";
choices[6] = "Fantastic Idea";
choices[7] = "Great Attitude";
choices[8] = "Great Turnaround";
choices[9] = "Great Work";
choices[10] = "Helping Hand";
choices[11] = "I am Successfactors";
choices[12] = "I am Sykes";
choices[13] = "I am your Fan";
choices[14] = "Successfactors Wizard";
choices[15] = "Speedster";
choices[16] = "Stepping up";
choices[17] = "Teamwork";
choices[18] = "1st Place";

var value = [];
value[0] = 0;
value[1] = 39;
value[2] = 34;
value[3] = 29;
value[4] = 33;
value[5] = 25;
value[6] = 36;
value[7] = 27;
value[8] = 28;
value[9] = 37;
value[10] = 35;
value[11] = 24;
value[12] = 23;
value[13] = 38;
value[14] = 31;
value[15] = 40;
value[16] = 30;
value[17] = 32;
value[18] = 26;

var badge = [];

function addInput(divName) {
var newDiv = document.createElement('div');
var selectHTML = "";

selectHTML = "<select onchange='badge.push(this.value);' >";

for (i = 0; i < choices.length; i = i + 1) {
selectHTML += "<option value='" + value[i] + "'>" + choices[i] + "</option>";
}
selectHTML += "</select>";
newDiv.innerHTML = selectHTML;
document.getElementById(divName).appendChild(newDiv);
}

function displayResult(divName) {
var result = '';
for (var i = 0; i < badge.length; i++) {
result += badge[i] + ' ';
}
document.getElementById(divName).innerHTML = result;
}

Plunker example

关于javascript - 如何将多个选择的值分配给javascript中的变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19937469/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com