大家好,我正在努力解决这个问题。
我有带有选项的html select和一个输入字段,用于接收所选选项的值。
因此,在该输入字段中,我有一个带有FOR的脚本来选择选项。
问题在于,它在FOR cicle中写入重复的值。
在发布的链接中,您将看到问题。
This is the website for testing want i have
这是我的代码。
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
allowClear: true
});
function getSelectedOptions(sel) {
var opts = [],
opt;
var len = sel.options.length;
var input = document.getElementById("inputId1");
for (var i = 0; i < len; i++) {
opt = sel.options[i];
if (opt.selected) {
input.value += opt.value + ",";
//alert(opt.value);
}
}
//return opts;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<div class="container">
<div class="row space-top">
<div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<select id="selectedOptions" class="js-example-basic-multiple" name="colaboradores[]" multiple="multiple" style="width:100% !important;" onchange="getSelectedOptions(this)">
<option value="U1">User 1</option>
<option value="U2">User 2</option>
<option value="U3">User 3</option>
<option value="G1">Grupo 1</option>
<option value="G2">Grupo 2</option>
<option value="G3">Grupo 3</option>
</select>
</div>
</div>
<div class="row space-top">
<div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label for="inputId1">Valores recebidos do select 2</label>
<input type="text" class="form-control" id="inputId1" aria-describedby="peqDesc">
<small id="peqDesc" class="form-text text-muted">Estas são as variáveis que recebo do select 2</small>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
在重写值之前,需要在for循环之前使用input.value = ''
清空输入:
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
function getSelectedOptions(sel) {
var opts = [],
opt;
var len = sel.options.length;
var input = document.getElementById("inputId1");
input.value = ''
for (var i = 0; i < len; i++) {
opt = sel.options[i];
if (opt.selected) {
input.value += opt.value + ",";
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<div class="container">
<div class="row space-top">
<div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<select id="selectedOptions" class="js-example-basic-multiple" name="colaboradores[]" multiple="multiple" style="width:100% !important;" onchange="getSelectedOptions(this)">
<option value="U1">User 1</option>
<option value="U2">User 2</option>
<option value="U3">User 3</option>
<option value="G1">Grupo 1</option>
<option value="G2">Grupo 2</option>
<option value="G3">Grupo 3</option>
</select>
</div>
</div>
<div class="row space-top">
<div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label for="inputId1">Valores recebidos do select 2</label>
<input type="text" class="form-control" id="inputId1" aria-describedby="peqDesc">
<small id="peqDesc" class="form-text text-muted">Estas são as variáveis que recebo do select 2</small>
</div>
</div>
</div>
</div>