[英]How to get the selected values of multiple select box in a text field in. I am using select js library
我想在文本字段中获取多个选择框的值。 这是我的代码。 正如您所看到的,我正在使用其他第三方 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 库来使选择框可搜索
如何让它发挥作用
这是我的代码
首先,你的代码是错误的,因为
在这里给你:)
var sel = document.getElementById('autoform-sector') sel.onchange = function () { 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"> <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>
你也可以通过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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.