javascript - 如何将文本框值添加到列表中?

标签 javascript jquery html

<分区>

我有一个这样的列表:

<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>

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

<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>

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

demo

最佳答案

<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>

关于javascript - 如何将文本框值添加到列表中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49878020/

相关文章:

javascript - 如何正确设置附加到按钮的日期选择器

javascript - 有没有办法用 JavaScript 中的移位器来增加或减少数字?

html - 如何让表格单元格具有相同的高度

php - tcpdf 无法正确打印带有图像的 HTML 文档 - PHP

JAVASCRIPT 从 datas.date 获取短日后显示全日

JavaScript代码在IE8中不起作用

javascript - 如何匹配用户名及其个人资料链接以及如何在表格中显示获取的数据

javascript - 属性 'contentWindow' 在 HTMLElement 类型上不存在 - 从一台服务器发送到另一台服务器

php - 不知道如何解决这个 javascript/图像映射/PHP 问题

html - 使用 post 方法的 Laravel 表单未提交