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

想在select上插入多个值

1 个答案: