无法通过给输入字段赋值来添加选择字段

大家好，希望你们做得好。问题是…

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

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>

请帮帮伙计们。提前感谢

更改代码如下：

更改为

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>

相关内容

最新更新

热门标签：