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

时间:2018-04-17 12:21:51

标签: 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>

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

3 个答案:

答案 0 :(得分: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>
js中的

使用jquery:

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

答案 1 :(得分: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>

答案 2 :(得分:3)

它可能对你有所帮助

import tkinter
import tkinter.ttk as ttk
from tkinter import font


root = tkinter.Tk()

frame = ttk.Frame(root)
frame.grid(column=0, row=0)

style = ttk.Style(root)
font = font.Font(family="wasy10", size=80)
style.configure("TButton", font=font)

ttk.Button(frame, text="Open file", command=None, style="TButton").grid(column=0, row=1)

root.mainloop()