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

How to get values separately from html elements to specfic html element field using javascript and jquery

本文关键字：html 元素 字段 jquery javascript 何获得      更新时间：2023-09-26

有两个字段命名为Add item 1和Add item 2

当用户点击按钮1时，将Add item 1和Add item 2中的元素值复制到另一个以项目列表1命名的地方。

现在我想从获得值添加项目1到项目列表1通过点击按钮1和添加项目2到项目列表2通过点击按钮2。

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

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

添加一个唯一标识符来分隔您的两个表单，我在这里使用表单上的data属性来确定在哪个列表中放置元素，使用find和this来选择相对于提交的表单的内容

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>

js: 

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

演示:http://jsfiddle.net/6kjwouhd/1/

在您的addToList()函数(以及effect()的to参数)中，无论您选择哪个按钮，您都将接收列表设置为#grocery-list ul，即项目列表1。

您可能必须修改它以确定已单击的按钮，也许通过将按钮编号(1或2)作为参数传递给addToList，以便您可以使用正确的列表id (grocery-list或grocery-list2)。

相关文章：