"获取select2中选定选项的值，然后使用jquery将值设置为输入文本？"
[英]Get the value of selected option in select2 and then set the value to an input text using jquery?
问题描述
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.
我是 jquery 和 javascript 的新手，所以也许这是一个愚蠢的问题，但我在将 select2 中的选定选项获得的值设置为文本输入时遇到问题。 This is my code:这是我的代码：
<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>
7 个解决方案
解决方案1
40 已采纳 2017-01-28 14:09:38
You are almost there.你快到了。 Put your value assignments within the change handler of the dropdown.将您的值分配放在下拉列表的change处理程序中。 The way you have it, it's just getting called when the page is loaded.你拥有它的方式，它只是在页面加载时被调用。
$(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);
})
});
解决方案2
17 2019-01-13 16:25:39
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);
});
解决方案3
4 2017-01-28 14:09:54
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">
解决方案4
1 2020-03-08 21:46:46
simply you can do this:你可以这样做：
$('#your-select-id').on("change", function(e) {
console.log($("#your-select-id").val())
});
解决方案5
0 2019-02-25 09:52:00
$("#e15").on("change", function () {
$("#e15_val").html($("#e15").val());
});
解决方案6
0 2019-07-24 14:39:32
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.val to get the value.如您所见，我使用e.val来获取值。 The only way I could get the trigger of the selected value to work was using change since using select2:select simply would not work (Which it did a couple of months back if I reckon).我可以让所选值的触发器起作用的唯一方法是使用change因为使用select2:select根本不起作用（如果我估计它在几个月前就做了）。 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.为了调试并达到这一点，我必须执行console.log(e)以获取触发 on change 案例时的所有事件。 I also saw that you could use e.added.text to get the text of the option and e.added.id to get the id, which is similar to e.val mentioned previously.我还看到可以使用e.added.text获取选项的文本，使用e.added.text . e.added.id获取 id，这与e.val提到的e.val类似。
In case you need to test e.vale agains a condition, make sure to turn it into a string or numeric.如果您需要再次测试 e.vale 条件，请确保将其转换为字符串或数字。 Like this:像这样：
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.通过这种方式，我们可以确保，如果值为空（false），它将在条件下正确返回 false，如果其中有任何值，它将按应有的方式返回 true。 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.此外，此方法可以完美地处理多个选定的选项，只需将参数multiple="multiple"到选择标记即可。
This was tested (Surprisingly) with Select2 4.0.8, Select2 3.5.2 and Select2 3.5.3 and it ended up working.这是用 Select2 4.0.8、Select2 3.5.2 和 Select2 3.5.3 测试的（出人意料地），它最终正常工作。 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).我再次很确定这里的其他答案有效，但现在我不得不求助于这个诡计来让它工作（2小时后弄清楚为什么它没有）。
解决方案7
0 2022-02-01 18:20:00
$(document).ready(function() {
//Init select2
$('#id').select2();
//Log selected value to console
$('#id').on('change', function(e) {
console.log($('#id').select2("val"));
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.