如何将文本框值添加到列表中？ [复制]答案

【问题标题】：How to add textbox value into a list? [duplicate]如何将文本框值添加到列表中？ [复制]
【发布时间】：2018-04-17 12:21:51
【问题描述】：

我有一个这样的列表：

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

我有一个文本框，我需要将文本框值添加到此列表中。暂时我需要它，就像页面重新加载时输入的所有内容都被重置一样。稍后我将连接到 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>

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

demo

【问题讨论】：

请分享在实现此要求时展示您的问题的工作 sn-p。
当您尝试实现这一目标时，您到底卡在了哪里？如果您不知道从哪里开始：look here
您似乎没有尝试任何方法来解决您的问题。所以请先尝试，然后再返回您的代码工作。我们很乐意为您提供帮助
它不工作 DURGA
如果你想让 Durga 听到你，不要喊 DURGA，只要 @Durga。 ^_^

标签： javascript jquery html

【解决方案1】：

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

【讨论】：

【解决方案2】：

我给你一个样品。希望对你有所帮助。

<div>
    <select id="Select1" name="Select1">
        <option>Option1</option>
        <option>Option2</option>
        <option>Option3</option>
        <option>Option4</option>
    </select>
    <input id="Text1" type="text" />
    <input id="Button1" type="submit" value="button" />
</div>

在js中使用jquery：

$(document).ready(function() {
        $("#Button1").click(function() {
            $('#Select1').append($("<option>" + $('#Text1').val() + "</option>"));
            return false;
        });
    });

【讨论】：

【解决方案3】：

可能对你有帮助

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    var counter = 1;

    function enter_task () {
            var text = $('#enter_task').val();
            $('#todo_list').append('<li><span>'+ text + ' </span><input type="submit" id="edit' + counter + '" value="Edit">' + '<input type="submit" class="done" id="delete' + counter + '" value="Delete">' +'</li>');
      
    $('#edit' + counter).click(function(){
        $(this).prev().attr('contenteditable','true');
        $(this).prev().focus();
    });

    $('#delete' + counter).click(function(){
        $(this).parent().remove();
    });

      counter++;
    };

    $(function() {
        $('#add').on('click', enter_task);
    });
</script>

 <body>
    <h1>Todo List</h1>  
        <input type="text" id="enter_task" placeholder="Enter Task">
        <input type="submit" id="add" value="Add Task">
        <p>
            <ul id="todo_list">
            </ul>
        </p>
</body>

【讨论】：

非常感谢......谢谢
如何让press enter退出编辑模式？