Question

我有下面的js代码，当按下按钮时动态添加另一个“select”元素。问题是如何将每个选择值分配给变量？

这适用于第一个选择

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>

Answer 1

我不确定这是你想要的，但试试这个：

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中将多个选择的值分配给变量

1 个答案: