Есть ли способ объединить выпадающее меню <select>с текстовым полем? - PullRequest
Новая
       4

Есть ли способ объединить выпадающее меню <select>с текстовым полем?

0 голосов
/ 23 января 2019

Добрый день, ребята из Stackoverflow,

У меня есть следующий код javascript, и я хочу добавить перед каждым текстовым полем «член» выпадающее меню выбора, определяемое массивом. Оба значения из select и text должны быть сохранены с шаблоном select (element: member) после одного значения структурированных данных в mySQL. Функция в коде первого определения количества членов должна оставаться как есть.

Я уже пытался с помощью javascript определить второй document.createElementById: 

var array = ["menu1","menu2","menu3"];
var selectList = document.createElement("select");
selectList.setAttribute("id", "mySelect");

но, похоже, это не сработало. 

<html>
<head>
<script type='text/javascript'>
    function addFields(){
        var number = document.getElementById("member").value;
        var container = document.getElementById("container");
        while (container.hasChildNodes()) {
        container.removeChild(container.lastChild);
        }
        for (i=0;i<number;i++){
            container.appendChild(document.createTextNode("Member " + (i+1)));
            var input = document.createElement("input");
            input.type = "text";
            input.name = "member" + i;
            container.appendChild(input);
            container.appendChild(document.createElement("br"));
        }
    }
</script>
<body>
        <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br/>
        <a href="#" id="filldetails" onclick="addFields()">FillDetails</a>
        <div id="container"/>
</body>
</head>
</html>

Код можно проверить здесь http://jsfiddle.net/t656N/1/

Результат, которого я желаю достичь, примерно такой: https://imgur.com/a/RDMjNkx

1 Ответ

0 голосов
/ 24 января 2019

Получил работу, используя секунду for и createElement, как показано ниже: 

<script type='text/javascript'>
function addFields() {
  var number = document.getElementById("member").value;
  var container = document.getElementById("container");
  var optionsSelect = [
    {
      id: 1,
      title: 'Option 1'
    },
    {
      id: 2,
      title: 'Option 2'
    },
    {
      id: 3,
      title: 'Option 3'
    }
  ];

  while (container.hasChildNodes()) {
    container.removeChild(container.lastChild);
  }
  for (i = 0; i < number; i++) {
    var select = document.createElement('select');
    for (var j = 0; j < optionsSelect.length; j++) {
      var options = document.createElement("option");
      options.value = optionsSelect[j].id;
      options.text = optionsSelect[j].title;
      select.appendChild(options);
    }
    container.appendChild(select);
    container.appendChild(document.createTextNode(" -> Description " + (i + 1) + " "));
    var input = document.createElement("input");
    input.type = "text";
    container.appendChild(input);
    container.appendChild(document.createElement("br"));
  }
}
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...