将 datalist 中的多个选定项目附加到带有逗号的输入标签

Question

当我从 datalist 标签中选择一个项目时，我们应该在 req-skills 输入标签中写入文本，然后我再次选择所选项目应该出现在 req-skills 输入标签中，前一个被选中并由" , "

$(document).ready(function() {

    $('#input-skill').click(function() {

        var txt = "";
        $('input-skill:selected').each(function() {
            txt+=$(this).val() + " , "
        });
        txt = txt.substring(0,txt.length-1);
        $('#req-skill').val(txt);
        $('#req-skill').innerHTML = txt ;

    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" class="form-control" id="req-skill" placeholder="Skills">
  <input type="text" list="skills" name="input-skill" id="input-skill"  placeholder="Select skills here" size="50" multiple>
  <datalist id="skills">
      <option value="website">
      <option value="django">
      <option value="javascript">
      <option value="app-development">
      <option value="software designer">
      <option value="python developer">
  </datalist>
</form>

Answer 1

您应该将 select 与 multiple 属性一起使用，以允许多选并监听其更改。

为了得到选择的值作为逗号分隔的列表，连接函数是最简单的方法。

$(document).ready(function() {
    $( "#skills" ).change( function() {
      var multipleSelectedValues = $( this ).val() || [];
      $('#req-skill').val(multipleSelectedValues.join( ", " ));
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" class="form-control" id="req-skill" placeholder="Skills">  
  <select id="skills" multiple>
      <option value="website">website</option>
      <option value="django">django</option>
      <option value="javascript">javascript</option>
      <option value="app-development">app-development</option>
      <option value="software designer">software designer</option>
      <option value="python developer">python developer</option>
  </select>
</form>

按住 Ctrl (windows) 或 Command (Mac) 按钮可选择多个选项。

此链接可能有用：https://api.jquery.com/val/