How to add textbox value into a list?

Question

I have a list like this :

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

demo

Please share the working snippet that demonstrate your issue while implementing this requirement. — gurvinder372, Apr 17 '18 at 12:22
when you were trying to achieve this, where exactly did you get stuck? if you don't know where to begin: [look here](http://api.jquery.com/append/) — Scaramouche, Apr 17 '18 at 12:24
It seems that you didn't try anything to solve your problem.So first try and then come back with your code effort. We will be glad to help then — Alive to die - Anant, Apr 17 '18 at 12:25
if you want Durga to *hear* you, don't yell DURGA, just @Durga. ^_^ — Scaramouche, Apr 17 '18 at 12:34

score 3 · Answer 1 · answered Apr 17 '18 at 12:44

i am giving you a sample. hope it'll help you out.

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

in js using jquery:

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

score 3 · Accepted Answer · answered Apr 17 '18 at 12:53

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

saketh · Answer 3 · 2018-04-17T13:09:35.717

it may help for you

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

How to make press enter to exit editing mode? – qwww Apr 18 '18 at 05:21 — qwww, Apr 18 '18 at 05:21

How to add textbox value into a list?

3 Answers3

in js using jquery:

Linked