我是jquery和javascript的新手，所以这可能是一个愚蠢的问题但是我在设置从select2中的选定选项获得的值到文本输入时遇到了问题。这是我的代码：
<head>
<!-- stylesheets -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<!-- scripts -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script>
$(function(){
// turn the element to select2 select style
$('.select2').select2({
placeholder: "Select a state"
});
var data = $(".select2 option:selected").text();
$("#test").val(data);
});
</script>
</head>
<body>
<p>select2 select box:</p>
<p>
<select class="select2" style="width:300px">
<option> </option>
<option value="AL">Alabama</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</select>
</p>
<input type="text" id="test">
</body>
</html>
我做错了什么想法？
谢谢！
你快到了。将您的值赋值放在下拉列表的change处理程序中。你拥有它的方式，只是在加载页面时调用它。
$(function(){
// turn the element to select2 select style
$('.select2').select2({
placeholder: "Select a state"
});
$('.select2').on('change', function() {
var data = $(".select2 option:selected").text();
$("#test").val(data);
})
});
根据文件https://select2.org/programmatic-control/events#event-data
$('.select2').on('select2:select', function (e) {
var data = e.params.data;
$('#test').val(data.text);
});
您可以使用change event：只要选择了一个选项，就可以将值复制到文本框中：
$(function(){
// turn the element to select2 select style
$('.select2').select2({
placeholder: "Select a state"
}).on('change', function(e) {
var data = $(".select2 option:selected").text();
$("#test").val(data);
});
});<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<p>select2 select box:</p>
<p>
<select class="select2" style="width:300px">
<option> </option>
<option value="AL">Alabama</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</select>
</p>
<input type="text" id="test">$("#e15").on("change", function () {
$("#e15_val").html($("#e15").val());
});
我在这里添加这个，因为，几个月前，这里提供的答案对我有用，但现在，一些伏都教发生了，我获得所选项目价值的唯一方法是执行以下操作：
$('.findUser').select2({
minimumInputLength: 3,
placeholder: "Search Members...",
allowClear: true,
dropdownAutoWidth : true,
width: '250px'
}).on('change', function (e) {
console.log(e.val);
});
如你所见，我使用e.val来获取价值。我能够使所选值的触发器工作的唯一方法是使用change，因为使用select2:select根本不起作用（如果我认为它在几个月前做了）。为了调试并达到这一点，我必须做一个console.log(e)来获取触发更改案例时的所有事件。我还看到你可以使用e.added.text获取选项的文本和e.added.id来获取id，这类似于之前提到的e.val。
如果您需要根据条件测试a.value，请确保将其转换为字符串或数字。像这样：
var newValue = (e.val).toString();
这样我们就可以确保，如果值为空（false），它将在条件中正确返回false，如果它有任何值，它将返回true。原因是如果我把它作为一个对象，它将永远是真的。此方法还可以通过将参数multiple="multiple"添加到select标记，完美地使用多个选定选项。
用Select2 4.0.8，Select2 3.5.2和Select2 3.5.3对它进行了测试（令人惊讶），最终工作正常。我再次肯定其他答案在这里有效，但现在我不得不求助于这个技巧让它发挥作用（2小时后弄清楚它为什么没有）。