如何在文本字段中获得多个选择框的选择值。我正在使用选择js库

Question

我想在文本字段中获取多个选择框的值。这是我的代码。如您所见，我正在使用其他第三方JS库来使选择框可搜索和下拉，尽管它是多个选择框。因此，我用来获取selected选项值的javascript不在文本字段中。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

<form method="post" action="">

<div class="form-group">
    <label for="autoform-company-name"><b>Which Industries do you wish to receive alerts about?</b></label>
    <select multiple class="selectpicker" id="autoform-sector" name="autoform-sector" style="height: 10px; overflow-y: scroll;"  data-live-search="true">
                    <option value="Code 01110 ">Code 01110 </option>
                    <option value="Code 01120 ">Code 01120 </option>
                    <option value="Code 01130 ">Code 01130 </option>
                    <option value="Code 97000 ">Code 97000 </option>
                    <option value="Code 98100 ">Code 98100 </option>
        </select>
</div>

<div class="form-group">
<input type="text" class="form-control" id="sector" name="sector" >
</div>           
</form>     


<script type="text/javascript">
    var sel = document.getElementsById ('autoform-sector')[0];
    sel.onclick = function () {
    document.getElementsById ('sector')[0].value += this.value + ' ';
}
</script>

我已经看到了这个问题Adding to a HTML text field by clicking items in a multiple select box，并尝试了这种解决方案。 http://jsfiddle.net/wDJLW/1/

但是此解决方案不适用于我。因为我正在使用另一个Java脚本库来使选择框可搜索

如何使其工作

这是我的代码

Answer 1

首先，您的代码在以下方面是错误的

• 它是“ GetElementById”而不是“ elements”，因为ID应该是单独的，在同一页面中永远不会有2个相同的ID，因此不需要[0]
• 在getElementById之后没有空格：var sel = document.getElementById（'autoform-sector'）;
• 事件不是onclick而是onchange

这里给您：）

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

<form method="post" action="">

<div class="form-group">
    <label for="autoform-company-name"><b>Which Industries do you wish to receive alerts about?</b></label>
    <select multiple class="selectpicker" id="autoform-sector" name="autoform-sector" style="height: 10px; overflow-y: scroll;"  data-live-search="true">
                    <option value="Code 01110 ">Code 01110 </option>
                    <option value="Code 01120 ">Code 01120 </option>
                    <option value="Code 01130 ">Code 01130 </option>
                    <option value="Code 97000 ">Code 97000 </option>
                    <option value="Code 98100 ">Code 98100 </option>
        </select>
</div>

<div class="form-group">
<input type="text" class="form-control" id="sector" name="sector" >
</div>           
</form>      


<script type="text/javascript">
    var sel = document.getElementById('autoform-sector')
    console.log(sel)
    sel.onchange = function () {
    document.getElementById('sector').value += this.value + ' ';
}
</script>

Answer 2

您也可以通过jquery实现它

$("#autoform-sector").on('change',function(){
    $("#sector").val($(this).val());
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

<form method="post" action="">

  <div class="form-group">
    <label for="autoform-company-name"><b>Which Industries do you wish to receive alerts about?</b></label>
    <select multiple class="selectpicker" id="autoform-sector" name="autoform-sector" style="height: 10px; overflow-y: scroll;" data-live-search="true">
      <option value="Code 01110 ">Code 01110 </option>
      <option value="Code 01120 ">Code 01120 </option>
      <option value="Code 01130 ">Code 01130 </option>
      <option value="Code 97000 ">Code 97000 </option>
      <option value="Code 98100 ">Code 98100 </option>
    </select>
  </div>

  <div class="form-group">
    <input type="text" class="form-control" id="sector" name="sector">
  </div>
</form>