如何将文本框值添加到列表中? [英] How to add textbox value into a list?

问题描述

我有一个这样的列表:

<p>Please select :</p>

<script type="text/javascript"></script>

<select id='pre-selected-options1' multiple='multiple'>
    <option value='elem_1' selected>1</option>
    <option value='elem_2'>2</option>
    <option value='elem_3'>nextoption</option>
    <option value='elem_4' selected>option 1</option>
    <option value='elem_100'>option 2</option>
  </select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
 <script src="js/jquery.multi-select.js"></script>
  <script type="text/javascript">
  $('#pre-selected-options1').multiSelect();
  </script>
</div>

我有一个文本框，我需要将文本框值添加到此列表中.就目前而言，我需要它，就像每当页面重新加载时一样，输入的所有内容都会重置.稍后我将连接到数据库.

i have a text box and i need to add the text box values into this list. For time being i need it like whenever the page reloads everything entered is reset. Later on i will connect to db.

<label>Enter: </label>
<input type="text" name="" class="input-default"><button type="button" class="btn btn-success btn-sm m-b-10 m-l-5">Add</button>

如何在单击按钮时将在文本框中输入的值添加到此列表中?

How to add the value entered in text box to this list on button click?

演示

推荐答案

<select id='pre-selected-options1' multiple='multiple'>
    <option value='elem_1' selected>1</option>
    <option value='elem_2'>2</option>
    <option value='elem_3'>nextoption</option>
    <option value='elem_4' selected>option 1</option>
    <option value='elem_100'>option 2</option>
    </select>
    <!-- This is the list (above)-->
    <br>
    <label>Enter: </label>
    <input type="text" name="" id="inp" class="input-default"> 
    <button type="button" onclick="add()" class="btn btn-success btn-sm m-b-10 m-l-5">Add</button>
    <!-- This is the textbox-->
    <script>
    function add()
    {
    var x = document.getElementById("pre-selected-options1");
    var option = document.createElement("option");
    option.text = document.getElementById("inp").value;
    x.add(option);
    }
    </script>

这篇关于如何将文本框值添加到列表中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！