如何获得输入 <input> 文本元素值 <li> 使用javascript和jquery的元素

Question

当用户单击输入复选框时，元素值将从元素内部复制到另一个以项目列表命名的位置。

现在，我想添加一个输入文本字段，并想将此字段的值保存到以项目列表命名的同一位置。

<!--  Input text field -->
    <input class="item" type="text" style="cursor: pointer;" value=" " >


  <!--  Item List -->
  <div id="grocery-list">
  <h3>Item List</h3>
  <ul>
    <li class="empty">Empty</li>
  </ul>
  </div>

这是我的小提琴，用于更好地理解。

在此先感谢，因为我是新来的，如果我在这篇文章中犯了任何错误。 请更正

Answer 1

请看看更新的小提琴

我将按钮更改为input type = submit $(".first_select option:selected").text() ，然后将select JQuery选择器更改为$(".first_select option:selected").text()

Answer 2

我将您的addToList()函数更改为接受要添加的字符串数组。

然后，在submit处理程序中，我只构建了该字符串数组，然后将其传递给函数。 干净得多。

  $("button").button(); function addToList(items) { var $list = $("#grocery-list ul"); $list.empty(); jQuery.each(items, function(i, text) { $list.append("<li>" + text + " <a class='delete_li'>&#10006;</a> </li>"); }); } $("body").on("click", ".delete_li", function() { $(this).closest("li").remove(); }); $("form").on("submit", function(a) { a.preventDefault(); $("fieldset").effect("transfer", { to: "#grocery-list ul", complete: function() { var items = []; // add text box values first $('input[type=text]').each(function() { items.push($(this).val()); }); // then add checkbox label texts if checked $("input:checked").each(function() { items.push($(this).next().html()); }); // finally, add the selected option values $('select :selected').each(function() { items.push($(this).val()); }); addToList(items); } }); }); 

 #grocery-list ul { list-style-type: none; margin: 0; padding: 0; } #grocery-list ul li + li { margin-left: 3%; } #grocery-list li { display: inline; } fieldset { width: 300px; } input { padding: .5em; } #grocery-list { border: 1px solid #000; float: right; width: 300px; padding: 0 1em; } #grocery-list h3 { margin-top: .3em; } .ui-effects-transfer { border: 1px dotted #000; } 

 <link href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="http://code.jquery.com/jquery-1.11.1.js"></script> <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <!-- Item List --> <div id="grocery-list"> <h3>Item List</h3> <ul> <li class="empty">Empty</li> </ul> </div> <form> <fieldset> <legend style="width :500px; margin-top:0px">Add Item</legend> <label for="item">Item Name:</label> <br> <!-- Input text field --> <input class="item" type="text" style="cursor: pointer;" value=" "> <label></label> <br> <br> <select style="position:absolute;margin-left:65px;margin-top:-18px;cursor: pointer;" class="first_select"> <option class="item" sty>mg</option> <option class="item" value="saab">ml</option> </select> <select style="position:absolute;margin-left:120px;margin-top:-18px; cursor: pointer;" class="second_select"> <option>STAT(once immediately)</option> <option>OD(once in a day)</option> <option>BiD(twice in a day)</option> <option>TiD(thrice in a day)</option> <option>QiD(four times a day)</option> </select> <select style="position:absolute;margin-left:290px;margin-top:-18px;cursor: pointer;" class="third_select"> <option>1 day</option> <option>2 days</option> <option>3 days</option> </select> <input class="item" type="checkbox" style="position:absolute;margin-left:360px;margin-top:-15px;cursor: pointer;"> <label style="position:absolute;margin-left:375px;margin-top:-16px">Before Food</label> <input class="item" type="checkbox" style="position:absolute;cursor: pointer;margin-left:460px;margin-top:-15px"> <label style="position:absolute;margin-left:475px;margin-top:-16px">After Food </label> <button class="button button3" style="position:absolute;margin-left:0px;margin-top:20px; width:100px; height:60px ">Add</button> </fieldset> </form> 

Answer 3

要将值附加到列表中，可以在按钮上添加onclick属性。 还为您的html元素使用id。 它使您的代码更具可读性，并且可以在一页中使用更多输入字段和按钮，如下所示：

<input type="text" id="inputvalue">
<ul id="itemlist">
</ul>
<button id="submit" onclick="append()"/>
<script>
    function append() {
        var input = $('#inputvalue').val();
        $('#itemlist').append('<li>' + input + '</li>');
    }
</script>

Answer 4

希望这就是您的期望。 请参阅下面的工作演示。

 <!DOCTYPE html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <style type="text/css"> </style> <body> <input class="item" type="text" style="cursor: pointer;" value=" " > <!-- Item List --> <div id="grocery-list"> <h3>Item List</h3> <ul class="thelist"> <li class="empty">Empty</li> </ul> </div> <button> <a class="button"> click </a> </button> <script type="text/javascript"> $(".button").click(function(){ var the_input_value = $(".item").val(); $("ul.thelist li").hide(); if (the_input_value == "") { alert("Value cannot be null"); } else { var create_li = $("<li>"+the_input_value+"</li>"); $("ul.thelist").append(create_li); $(".item").val(""); } }); </script> </body> </html> 

否则，如果要显示所有项目，则用户输入的内容如下所示。

 <!DOCTYPE html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <style type="text/css"> </style> <body> <input class="item" type="text" style="cursor: pointer;" value=" " > <!-- Item List --> <div id="grocery-list"> <h3>Item List</h3> <ul class="thelist"> <li class="empty">Empty</li> </ul> </div> <button> <a class="button"> click </a> </button> <script type="text/javascript"> $(".button").click(function(){ var the_input_value = $(".item").val(); $("ul.thelist li:first-child").hide(); if (the_input_value == "") { alert("Value cannot be null"); } else { var create_li = $("<li>"+the_input_value+"</li>"); $("ul.thelist").append(create_li); $(".item").val(""); } }); </script> </body> </html>