невозможно добавить поля выбора, давая значения для поля ввода? - PullRequest
Новая
       14

невозможно добавить поля выбора, давая значения для поля ввода?

0 голосов
/ 21 ноября 2018

Привет, ребята, надеюсь, у вас все хорошо.Проблема в том, что ...

  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поле вместо поля ввода, где мы пытаемся поместить некоторые значения, чтобы выбрать поля.Я пробовал следующее, но не работает. 

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

, пожалуйста, помогите, ребята.заранее спасибо

1 Ответ

0 голосов
/ 21 ноября 2018

Измените код, как показано ниже:

измените 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...