要在选择时插入多个值

Question

我试图从列表中选择多个选项，然后在输入字段中插入这些值。 到目前为止我所做的。

HTML：

  <div class="input-container">
    <label>preffered country</label>
       <div class="dropdown-container-multiple">
          <input type="text" name="pc" placeholder="please select" required />
            <span></span>
              <ul name="country" class="multiple">
                <li>I don't know</li>
                <li>Italy</li>
                <li>Spain</li>
                <li>Switzerland</li>
                <li>Turkey</li>
              </ul>
       </div>
  </div>

jQuery：

$('.dropdown-container-multiple ul li').click(function(){
   $(this).toggleClass('active');
   $(this).parent('ul').parent('.dropdown-container-multiple').find('input').val($(this).text());
});

这对于单值期权来说做得很好，但是我尝试了我所知道的，但是对多选却不起作用

任何帮助将不胜感激。 谢谢

Answer 1

您需要连接到旧值，而不仅仅是替换它。

$('.dropdown-container-multiple ul li').click(function(){
    $(this).toggleClass('active');
    var text = $(this).text();
    $(this).parent('ul').parent('.dropdown-container-multiple').find('input').val(function(i, oldval) {
        return oldval == '' ? text : oldval + " " + text;
    });
});

为了能够从输入中添加和删除项目，请加入active元素中的所有文本。

$('.dropdown-container-multiple ul li').click(function(){
    $(this).toggleClass('active');
    var texts = $(".dropdown-container-multiple ul li.active").map(function() {
        return $(this).text();
    }).get().join(" ");
    $(this).parent('ul').parent('.dropdown-container-multiple').find('input').val(texts);
});