使用jQuery获取Select2中所选选项的值，然后将该值设置到输入文本框中。

Question

使用jQuery获取Select2中所选选项的值，然后将该值设置到输入文本框中。

13

我对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>

我做错了什么？有什么建议吗？

谢谢！

- neek05

你尝试过 var data = $(".select2").val() 吗？ - Sandeep Nayak

7个回答

19

根据文档https://select2.org/programmatic-control/events#event-data。

$('.select2').on('select2:select', function (e) {
    var data = e.params.data;
    $('#test').val(data.text);
});

- robmcvey

4

您可以使用“更改事件”：每当选择一个选项时，该值可以复制到文本框中。请参考此处了解更多信息。

$(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">

- gaetanoM

感谢您提供的备选方案！ - neek05

2

简单地说，您可以这样做：

$('#your-select-id').on("change", function(e) {
                console.log($("#your-select-id").val())
 });

- Mortada Jafar

0

$("#e15").on("change", function () {
    $("#e15_val").html($("#e15").val());
});

- Shahidul Islam

1

感谢您提供这段代码片段，它可能会提供一些有限的、即时的帮助。通过展示为什么这是一个好的解决方案，一个适当的解释将极大地提高其长期价值，并使其对未来读者具有其他类似问题更有用。请[编辑]您的答案以添加一些解释，包括您所做出的假设。 - Suraj Rao

0

我在这里添加这个是因为几个月前，这里提供的答案对我有用，但现在，某些神秘的事情发生了，我获取所选项目的值的唯一方法是执行以下操作：

$('.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)来获取所有事件，当它触发on change case时。我还看到你可以使用e.added.text来获取选项的文本和e.added.id来获取id，这与之前提到的e.val类似。

如果您需要测试e.vale是否符合条件，请确保将其转换为字符串或数字。像这样：

var newValue = (e.val).toString();

这样我们就可以确保，如果值为空（false），在条件中它将正确地返回false，如果它有任何值，则会像应该返回true。原因是，如果我将其保留为对象，它将始终为真。此外，只需将参数 multiple =“multiple”添加到选择标记，此方法即可与多个选定选项无缝配合使用。

这已经通过了Select2 4.0.8、Select2 3.5.2和Select2 3.5.3的测试，结果效果非常好。我相信其他答案在这里也能够起作用，但是现在我不得不使用这种诡计来让它工作（花费了2个小时研究为什么它没有工作）。

- Luis Alvarado

-2

$(document).ready(function() {
    // Init select2
    $('#id').select2();
    // Log selected value to console
    $('#id').on('change', function(e) {
        console.log($('#id').select2("val")); 
    });
});

- Felix Wiafe

2

请不要仅仅发布代码作为答案，还要提供解释您的代码是如何解决问题的。带有解释的答案通常更有帮助和更高质量，并且更有可能吸引赞同。 - Tyler2P

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt Spinks · Accepted Answer

你已经快完成了。将值分配放到下拉列表的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);
    })
  });