时间戳

首页 > 解决方案 > 无法通过为输入字段提供值来添加选择字段？

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

问题描述

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

  1. 当您尝试在那里添加一些值时，我有一个输入字段，然后会出现一个选择框。但问题是它只显示我没有按照价值要求得到的一个。

  2. 第二个问题是我试图使用选择字段而不是我尝试过的输入字段

    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>

请帮助伙计们。提前致谢

标签： javascriptphpjquerybootstrap-4codeigniter-3

解决方案

更改代码如下：

变化是

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>

推荐阅读