logo标签列表

如何将文本框的值添加到列表中？

javascriptjqueryhtml
5

我有一个这样的列表：

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

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

演示

请分享能够演示您在实现此需求时遇到问题的工作代码片段。 - gurvinder372
当你试图实现这个功能时，你具体卡在哪里了？如果你不知道从哪里开始：看这里 - Scaramouche
看起来你还没有尝试过任何方法来解决你的问题。所以先试一下，然后再回来展示你的代码努力。我们很乐意提供帮助。 - Alive to die - Anant
不起作用 DURGA - qwww
如果你想让Durga“听到”你，不要大喊DURGA，只需@Durga。^_^ - Scaramouche
请查看此fiddle。 - Durga
3个回答
3

我为你提供一个示例，希望它能帮助你解决问题。

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

使用jQuery的JavaScript：

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

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

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>

非常感谢......谢谢 - qwww
如何使按下回车键退出编辑模式？ - qwww
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接