Question

需要将所有带有.eventInfo类的输入的值传递给#eventList输入。每次用户按下按钮＆＃34; #addEvent＆＃34;。

时，必须发生此功能

（编辑：

好的，以便清理：我有三个不同的输入框应该共享类（.eventInfo）和一个输入按钮（＆＃34; addEvent＆＃34;），当点击时，应该附加所有文本写在evenInfo框中的一个单独的选择框（＆＃34; eventList＆＃34;）。评论中提供了工作解决方案。）

HTML正文如下：

<body>

  <div>
    <p> Add an event here </p>
        <ul>
          <li> <p> Name </p>  <input class="eventInfo" type="text"> </li>
          <li> <p> Date </p> <input class="eventInfo" type="text"> </li>
          <li> <p> Description </p>  <input class="eventInfo" type="text"> </li>

          <li> <input id="addEvent" type="button"/> </li>
        </ul>
  </div>

  <div>
    <select multiple id="eventList"> </select>
  </div>

</body>

我正在编写脚本，到目前为止：

$("#addEvent").click(function() {
       var inputValue = $(".eventInfo").val();
       $("#eventList").add(inputValue);

      });

我确信这在某种程度上是根本错误的，但我无法解释如何或为何。

Answer 1

试试这个：

$("#addEvent").click(function() {
    $(".eventInfo").each(function(){
        var inputValue = $(this).val();    
        $("#eventList").append("<option value='" + inputValue + "'>" + inputValue + "</option");

    });

});

Jsfiddle：http://jsfiddle.net/906rbzu2/

Answer 2

$(".eventInfo")使用。eventInfo作为一个类来获取dom中的每个元素。因此，从$(".eventInfo")返回的对象很可能不拥有方法val() （因为这是针对单个对象而不是列表或集合）

您很可能需要使用each函数来遍历列表并应用新值...

如果要更改输入项的值，可以使用以下语法

执行此操作

$('itemtochange').val(newvalue);

Answer 3

尝试这样的事情：

  $("#addEvent").click(function() {           
       $(".eventInfo").each(function(){
           $("#eventList").append('<option value="'+$(this).val()+'">' + $(this).val()+'</option>');
       });
  });

Answer 4

试试：http://jsfiddle.net/b85kq724/

<div>
<p> Add an event here </p>
<ul>
    <li>
        <p> Name </p>  <input class="eventInfo" type="text" /></li>
    <li>
        <p> Date </p> <input class="eventInfo" type="text" />
    </li>
    <li>
        <p> Description </p>  <input class="eventInfo" type="text" />
    </li>

    <li>
        <input id="addEvent" type="button" />
        </li>
    </ul>
</div>

<div>
    <select multiple id="eventList"> </select>
</div>

<script>
    $("#addEvent").click(function() {
    $.each($(".eventInfo"), function() {
    $("#eventList").append("<option>" + $(this).val() + "</option>");
    });


    });
</script>

您需要一次获取一个输入值，这就是我使用$ .each（）的原因：http://api.jquery.com/jquery.each/

Answer 5

$(function(){
  $("#addEvent").on('click',function(){
    var $info = $('.eventInfo');
    var option = "<option>" + $info.eq(0).val() + " " + $info.eq(1).val() + " " + $info.eq(2).val() + "</option>";
    $('#eventList').append(option);
  });
});

jQuery：将值从输入移动到另一个输入

5 个答案: