javascript - 带有select2的重复值的javascript cicle
问题描述
大家好,我正在努力解决这个问题。
我有带有选项的 html select 和一个输入字段来接收所选选项的值。
所以我有一个带有 FOR 的脚本,可以在该输入字段中选择选项。
问题是在 FOR cicle 中它会写入重复的值。
在发布的链接中,您将看到问题。
这是我的代码。
$(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>
解决方案
在重写值之前,您需要input.value = ''
在 for 循环之前清空输入:
$(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>
推荐阅读
- php - 为什么我只能从 php 中省略 echo 的括号?
- node.js - 如何检查 json 文件中是否有内容?
- http - 禁止 nginx 使用 80 端口
- angular - Angular 验证器不会被销毁
- artificial-intelligence - 在 gcloud 中查找机器学习中的主题
- ios - 我们可以将应用外的 iOS 用户重定向到第三方链接吗?
- visual-studio-code - 如何在 Visual Studio Code 中使用两个快捷键编译或运行 c++ 文件?
- c++ - 两个数字之和 == 目标
- javascript - 是否可以返回父元素点击功能的子元素?
- php - 如何在以`-`分隔的单列中将范围保存在DB中的范围之间查询`ranges`中的数据?