无法通过为输入字段提供值来添加选择字段？答案

【问题标题】：unable to add select fields by giving values to input field?无法通过为输入字段提供值来添加选择字段？
【发布时间】：2019-04-23 16:10:19
【问题描述】：

大家好，希望你们一切顺利。问题是……

当您尝试在其中添加一些值时，我有一个输入字段，然后会出现一个选择框。但问题是它只显示了一个我没有按照价值观要求得到的东西。
第二个问题是我尝试使用选择字段而不是我尝试过的输入字段

var e = document.getElementById("this_is_my_select_field_values");

这是一个选项，但无法使用选择字段代替输入字段。 var strUser = e.options[e.selectedIndex].value;

这是我的代码：

function addFields() {
	var number = document.getElementById("member").value;
	var myDiv = document.getElementById("myDiv");

	//Create array of options to be added
	var array = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];

	while (myDiv.hasChildNodes()) {
		myDiv.removeChild(myDiv.lastChild);
	}
	for (i = 0; i < number; i++) {
		myDiv.appendChild(document.createTextNode("Member " + (i + 1)));

		var selectList = document.createElement("select");
		selectList.setAttribute("id", "mySelect");
		selectList.setAttribute("class", "form-control");
		myDiv.appendChild(selectList);
		myDiv.appendChild(document.createElement("br"));

		//Create and append the options
		for (var i = 0; i < array.length; i++) {
			var option = document.createElement("option");
			option.setAttribute("value", array[i]);
			option.text = array[i];
			selectList.appendChild(option);
		}
	}
}

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <!-- jQuery library -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Latest compiled JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   </head>
   <body>
      <!-- <div id="myDiv" class="col-xs-1">Append here</div> -->
      <input type="text" id="member" name="member" value="" onkeyup="addFields()">
      <div id="myDiv" class="col-xs-1">Append here</div>
   </body>
</html>

第一个问题:: 没有出现选择字段的数量。

第二个问题 :: 在尝试使用选择字段而不是输入字段时它不起作用，我们试图将一些值显示为选择字段。我尝试了以下方法，但不起作用。

<select id="id">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>

请帮助大家。提前致谢

【问题讨论】：

这是因为i内部更新了for loop
哦抱歉没看到。是的，感谢秘密超级明星。但是怎么可能使用选择字段而不是输入字段呢？
你的意思是输入到addfields（下拉菜单）？
我的意思是我想使用选择字段而不是输入字段。我们在其中给出值以显示选择字段。我只想给那里选择字段，并且由于选项添加或显示子选择字段。
如果你使用jquery，你可以使用$("#this_is_my_select_field_values").val();

标签： javascript php jquery bootstrap-4 codeigniter-3

【解决方案1】：

修改代码如下：

变化是

for (var j = 0; j < array.length; j++) {
            var option = document.createElement("option");
            option.setAttribute("value", array[j]);
            option.text = array[j];
            selectList.appendChild(option);
        }

function addFields() {
	var number = document.getElementById("member").value;
	var myDiv = document.getElementById("myDiv");

	//Create array of options to be added
	var array = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];

	while (myDiv.hasChildNodes()) {
		myDiv.removeChild(myDiv.lastChild);
	}
	for (i = 0; i < number; i++) {
		myDiv.appendChild(document.createTextNode("Member " + (i + 1)));

		var selectList = document.createElement("select");
		selectList.setAttribute("id", "mySelect");
		selectList.setAttribute("class", "form-control");
		myDiv.appendChild(selectList);
		myDiv.appendChild(document.createElement("br"));

		//Create and append the options
		for (var j = 0; j < array.length; j++) {
			var option = document.createElement("option");
			option.setAttribute("value", array[j]);
			option.text = array[j];
			selectList.appendChild(option);
		}
	}
}

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <!-- jQuery library -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Latest compiled JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   </head>
   <body>
      <!-- <div id="myDiv" class="col-xs-1">Append here</div> -->
      <input type="text" id="member" name="member" value="" onkeyup="addFields()">
      <div id="myDiv" class="col-xs-1">Append here</div>
   </body>
</html>

关于问题2：

在纯 java 脚本中：

var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;

使用jQuery

var selected = ("#this_is_my_select_field_values").val();

将input 更改为select

<!DOCTYPE html>
<html>
   <head>
   <script>
   function addFields() {
	var number = document.getElementById("member").value;
	var myDiv = document.getElementById("myDiv");

	//Create array of options to be added
	var array = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];

	while (myDiv.hasChildNodes()) {
		myDiv.removeChild(myDiv.lastChild);
	}
	for (i = 0; i < number; i++) {
		myDiv.appendChild(document.createTextNode("Member " + (i + 1)));

		var selectList = document.createElement("select");
		selectList.setAttribute("id", "mySelect");
		selectList.setAttribute("class", "form-control");
		myDiv.appendChild(selectList);
		myDiv.appendChild(document.createElement("br"));

		//Create and append the options
		for (var j = 0; j < array.length; j++) {
			var option = document.createElement("option");
			option.setAttribute("value", array[j]);
			option.text = array[j];
			selectList.appendChild(option);
		}
	}
}
   </script>
      <title></title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <!-- jQuery library -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Latest compiled JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   </head>
   <body>
      <!-- <div id="myDiv" class="col-xs-1">Append here</div> -->
    <select id="member" name="member" value="" onchange="addFields()"> <option value="">--select--</option><option value="1">1</option> <option value="2">2</option> </select>
      <div id="myDiv" class="col-xs-1">Append here</div>
   </body>
</html>

【讨论】：

我所期待的