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

Question

我想在文本字段中获取多个选择框的值。这是我的代码。如您所见，我正在使用其他第三方 JS 库来使选择框可搜索和下拉，尽管它是一个多选框。出于这个原因，我用来获取所选选项值的 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>

我已经看到这个问题通过单击多选框中的项目添加到 HTML 文本字段 并尝试使用此解决方案。http://jsfiddle.net/wDJLW/1/

但是这个解决方案对我不起作用。因为我正在使用另一个 java-script 库来使选择框可搜索

如何使它工作

这是我的代码

Answer 1

jquery您也可以通过$("#autoform-sector").on('change',function(){&nbsp; &nbsp; $("#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="">&nbsp; <div class="form-group">&nbsp; &nbsp; <label for="autoform-company-name"><b>Which Industries do you wish to receive alerts about?</b></label>&nbsp; &nbsp; <select multiple class="selectpicker" id="autoform-sector" name="autoform-sector" style="height: 10px; overflow-y: scroll;" data-live-search="true">&nbsp; &nbsp; &nbsp; <option value="Code 01110 ">Code 01110 </option>&nbsp; &nbsp; &nbsp; <option value="Code 01120 ">Code 01120 </option>&nbsp; &nbsp; &nbsp; <option value="Code 01130 ">Code 01130 </option>&nbsp; &nbsp; &nbsp; <option value="Code 97000 ">Code 97000 </option>&nbsp; &nbsp; &nbsp; <option value="Code 98100 ">Code 98100 </option>&nbsp; &nbsp; </select>&nbsp; </div>&nbsp; <div class="form-group">&nbsp; &nbsp; <input type="text" class="form-control" id="sector" name="sector">&nbsp; </div></form>

Answer 2

首先，您的代码是错误的，因为它是“GetElementById”而不是“元素”，因为 ID 应该是单独的，同一页面中永远不会有 2 个相同的 id，所以不需要 [0]getElementById 之后没有空格： var sel = document.getElementById('autoform-sector');事件不是 onclick 而是 onchange在这里为你:)&nbsp; &nbsp; var sel = document.getElementById('autoform-sector')&nbsp; &nbsp; sel.onchange = function () {&nbsp; &nbsp; document.getElementById('sector').value += this.value + ' ';}<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">&nbsp; &nbsp; <label for="autoform-company-name"><b>Which Industries do you wish to receive alerts about?</b></label>&nbsp; &nbsp; <select multiple class="selectpicker" id="autoform-sector" name="autoform-sector" style="height: 10px; overflow-y: scroll;"&nbsp; data-live-search="true">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Code 01110 ">Code 01110 </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Code 01120 ">Code 01120 </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Code 01130 ">Code 01130 </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Code 97000 ">Code 97000 </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Code 98100 ">Code 98100 </option>&nbsp; &nbsp; &nbsp; &nbsp; </select></div><div class="form-group"><input type="text" class="form-control" id="sector" name="sector" ></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</form>&nbsp; &nbsp; &nbsp;&nbsp;