Как добавить динамическое раскрывающееся меню в javascript?

Я пытаюсь добавить новое раскрывающееся поле, когда нажимаю кнопку «Добавить» и правильно ее работаю, но когда я добавляю динамический раскрывающийся список и заполняю значениями и нажимаю кнопку «Добавить» для нового раскрывающегося списка, все вышеперечисленные значения удаляются так как я могу добавить без удаления существующих значений?Как добавить динамическое раскрывающееся меню в javascript?

Вот код

<script> 
    function addNew() { 
     var NumOfField = document.getElementById('fields').value; 
     NumOfField = Number(NumOfField)+1; 
     document.getElementById('fields').value = NumOfField; 

     document.getElementById('newEvent').innerHTML += "<br><br><br><label class='control-label col-md-3 col-sm-3 col-xs-12'>Select </label><div class='col-md-9 col-sm-9 col-xs-12'><select class='form-control' name='event"+NumOfField+"'><option value='select'>Select</option><option value='1'>foo</option></option><option value='2'>baar</option></select></div>"; 
    } 
    </script> 


    <body> 
    <input type="hidden" value="1" id="fields" name="fields"> 
    <div class="form-group" id="newEvent"> 
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Select Step 1</label> 
    <div class="col-md-9 col-sm-9 col-xs-12"> 
    <select class="form-control" name="event1"> 
    <option value="select">Select</option> 
    <option value="1">foo</option> 
    <option value="2">bar</option> 
    {% endfor %} 
    </select> 
    </div> 
    </div> 
<button type="button"onclick="addNew();">Add</button>

источник

2016-02-06 Kaushik Makwana

скопировать 1-ый выпадающий HTML-код и вставьте в скрипте и назначить конкретный вар. Затем присвойте этому var новому выпадающему списку –

Это очень просто, просто посмотреть на этом примере, предоставленной мне в сниппет.

Вы должны подключить переменную для выбора объекта.
Получить значение и текст опции от пользователя.
Создайте новый элемент DOM.
Настройте этот элемент.
Добавить этот элемент.
Гордиться своим рабочим выпадающим списком.

Он будет работать с бутстрапом, как и в вопросе. Но я удалил весь скелет, чтобы обеспечить аккуратный ответ.

Имейте славный день!

<select id="example"> 
 
    <option value="select">Select</option> 
 
    <option value="1">foo</option> 
 
    <option value="2">bar</option> 
 
</select> 
 
<hr/> 
 
Value: <input type="text" id="val" /> 
 
<br/> 
 
Option body: <input type="text" id="text" /> 
 

 
<button id="button">Add new option</button> 
 

 
<script> 
 
    var anchor = document.getElementById("example") 
 
    function addNew() { 
 
    var anchor = document.getElementById("example") 
 
    var val = document.getElementById("val").value 
 
    var text = document.getElementById("text").value 
 
    alert(val+"=>"+text) 
 
    if (val && text) { 
 
     alert("adding new option") 
 
     var option = document.createElement("option") 
 
     option.classList.add("example") 
 
     option.classList.add("example2") 
 
     option.name = "for php" 
 
     option.id = "you know" 
 
     option.value = val 
 
     option.text = text 
 
     anchor.appendChild(option) 
 
    } else { 
 
     alert("fill the fields") 
 
    } 
 
    } 
 

 
    document.getElementById("button").onclick = addNew 
 
</script>

источник

2016-02-06 09:23:31

Как добавить динамическое раскрывающееся меню в javascript?

ответ

Смежные вопросы