Javascript 在 select2 中获取所选选项的值，然后使用 jquery 将该值设置为输入文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41910639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get the value of selected option in select2 and then set the value to an input text using jquery?
提问by neek05
I'm new to jquery and javascript, so maybe this is a silly question but i'm having problems setting the value obtained from a selected option in select2 to a text input. This is my code:
我是 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>
Any ideas of what i'm doing wrong?
关于我做错了什么的任何想法？
Thanks!
谢谢！
回答by Matt Spinks
You are almost there. Put your value assignments within the changehandler of the dropdown. The way you have it, it's just getting called when the page is loaded.
你快到了。将您的值分配放在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);
})
});
回答by robmcvey
As per the docs https://select2.org/programmatic-control/events#event-data
根据文档https://select2.org/programmatic-control/events#event-data
$('.select2').on('select2:select', function (e) {
var data = e.params.data;
$('#test').val(data.text);
});
回答by gaetanoM
You can use change event: whenever an option is selected the value can be copied to the text box:
您可以使用更改事件：只要选择了一个选项，就可以将值复制到文本框：
$(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">回答by Shahidul Islam
$("#e15").on("change", function () {
$("#e15_val").html($("#e15").val());
});
回答by Luis Alvarado
I am adding this here because, a couple of months back, the answers provided here worked for me, but now, some voodoo happened and the only way for me to get the value of a selected item was doing the following:
我在这里添加这个是因为，几个月前，这里提供的答案对我有用，但是现在，发生了一些伏都教，我获得所选项目价值的唯一方法是执行以下操作：
$('.findUser').select2({
minimumInputLength: 3,
placeholder: "Search Members...",
allowClear: true,
dropdownAutoWidth : true,
width: '250px'
}).on('change', function (e) {
console.log(e.val);
});
As you can see, I used e.valto get the value. The only way I could get the trigger of the selected value to work was using changesince using select2:selectsimply would not work (Which it did a couple of months back if I reckon). To debug and get to this point I had to do a console.log(e)to get all events when it triggered the on change case. I also saw that you could use e.added.textto get the text of the option and e.added.idto get the id, which is similar to e.valmentioned previously.
如您所见，我曾经e.val获取过该值。我可以让所选值的触发器起作用的唯一方法是使用，change因为使用select2:select根本不起作用（如果我估计它在几个月前就起作用了）。为了调试并达到这一点，我必须console.log(e)在触发 on change 案例时执行 a来获取所有事件。我还看到您可以使用e.added.text来获取选项的文本并e.added.id获取 id，这与e.val前面提到的类似。
In case you need to test e.vale agains a condition, make sure to turn it into a string or numeric. Like this:
如果您需要再次测试 e.vale 条件，请确保将其转换为字符串或数字。像这样：
var newValue = (e.val).toString();
var newValue = (e.val).toString();
This way we can make sure that, if the value is empty (false) it will return false properly in a condition and if it has any value in it, it will return true as it should. The reason is that if I leave it as an object, it will always be true. Also this method works flawlessly with multiple selected options, just by adding the parameter multiple="multiple"to the select tag.
通过这种方式，我们可以确保，如果值为空（false），它将在条件下正确返回 false，如果其中有任何值，它将按应有的方式返回 true。原因是如果我把它作为一个对象，它永远是真的。此外，此方法可以完美地处理多个选定的选项，只需将参数添加multiple="multiple"到 select 标签即可。
This was tested (Surprisingly) with Select2 4.0.8, Select2 3.5.2 and Select2 3.5.3 and it ended up working. Again I am pretty sure the other answers here worked, but now I had to resort to this trickery to get it to work (After 2 hours figuring out why it did not).
这是用 Select2 4.0.8、Select2 3.5.2 和 Select2 3.5.3 测试的（出人意料地），它最终正常工作。我再次很确定这里的其他答案有效，但现在我不得不求助于这个诡计来让它工作（2小时后弄清楚为什么它没有）。
回答by Mortada Jafar
simply you can do this:
你可以这样做：
$('#your-select-id').on("change", function(e) {
console.log($("#your-select-id").val())
});
