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>

以下是My Fiddle以便更好地理解。

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

Answer 1

请查看更新的Fiddle

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

Answer 2

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

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

＆＃13;

  $("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);
      }
    });
  });

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 3

要将值附加到列表，您可以向yout按钮添加属性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>

如何使用javascript和jquery将Input <input />文本元素值赋予<li>元素

4 个答案: