如何使用javascript和jquery分别从html元素到特定html元素字段获取值

有两个字段的名称分别为添加项目1和添加项目2

当用户单击按钮1时，元素值从添加项目1和添加项目2复制到另一个名为项目列表1的位置

现在，我想通过单击按钮1，从添加项目1到项目列表1获取值，并通过单击按钮2，从添加项目2到项目列表2

我的小提琴的工作代码链接在注释中。我已经将所有代码缩进了4个空格，但它不允许我在帖子中粘贴我的小提琴链接

如果我在这篇文章中犯了错误，请编辑它。非常感谢您的帮助。

在您的

addToList（）

函数中（以及

effect（）

的

to

参数中），无论选择哪个按钮，您都将接收列表设置为

#杂货店列表ul

，即项目列表1

---

您可能需要对其进行修改，以确定单击了哪个按钮，可能需要将按钮编号（1或2）作为参数传递给

addToList

，以便使用正确的列表id（

screery list

或

screery-list2

），我在这里使用表单上的一个数据属性来确定在什么列表中放置元素，使用

find

和

this

来选择与提交表单相关的内容

html:

项目清单1

空

项目清单2

空

添加项目1
项目名称：






镁
毫升
统计（立即一次）
OD（每天一次）
投标（一天两次）
每日三次
QiD（一天四次）
一天
2天
三天
饭前
饭后
按钮1
添加项目2
项目名称：






镁
毫升
统计（立即一次）
OD（每天一次）
投标（一天两次）
每日三次
QiD（一天四次）
一天
2天
三天
饭前
饭后
按钮2

js:

$（“按钮”）.button（）；
函数addToList（项目、列表）{
var$list=$（'#'+list）.find（“ul”）；
$list.empty（）；
每个（项、函数（i、文本）{
$list.append（“
”+text+“
my fiddle URI）你能在这里发布一些html+js吗？在这里，你已经在表单标签上添加了唯一的标识符“data attribute”，它等于list@waqasadil在回答中看到html像你这样的人是真正的好帮手。非常感谢。我已经看到并理解了。
<!--  Item List 1 -->
<div id="grocery-list">
  <h3>Item List1</h3>
  <ul>
    <li class="empty">Empty</li>
  </ul>
</div>

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

<!--  Add Item 1 -->
<form data-id="grocery-list">
  <fieldset>
    <legend style="width :500px; margin-top:0px">Add Item 1</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 ">Button 1</button>
  </fieldset>
</form>

<!--  Add Item 2 -->

<form data-id="grocery-list2">
  <fieldset>
    <legend style="width :500px; margin-top:100px">Add Item 2</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="button1 button3" style="position:absolute;margin-left:0px;margin-top:20px; width:100px; height:60px ">Button 2</button>
  </fieldset>
</form>

       $("button").button();

  function addToList(items, list) {
    var $list = $('#'+list).find("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) {
   list = $(this).attr('data-id');
    a.preventDefault();
    $(this).find("fieldset").effect("transfer", {
      to: "#"+list+" ul",
      complete: function() {
        var items = [];
        // add text box values first
        $(this).find('input[type=text]').each(function() {
          items.push($(this).val());
        });
        // then add checkbox label texts if checked
        $(this).find("input:checked").each(function() {
          items.push($(this).next().html());
        });
        // finally, add the selected option values
        $(this).find('select :selected').each(function() {
          items.push($(this).val());
        });
        addToList(items,list);
      }
    });
  });