在 select2 中获取所选选项的值，然后使用 jquery 将该值设置为输入文本？

Question

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

你知道我做错了什么吗？

谢谢！

Answer 1

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

Answer 2

您可以使用 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">

Answer 3

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

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

Answer 4

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

Answer 5

我在这里添加这个是因为，几个月前，这里提供的答案对我有用，但现在，发生了一些巫术，这是我获得 selected 价值的唯一途径项目正在执行以下操作：

$('.findUser').select2({
    minimumInputLength: 3,
    placeholder: "Search Members...",
    allowClear: true,
    dropdownAutoWidth : true,
    width: '250px'
}).on('change', function (e) {
    console.log(e.val);
});

如您所见，我使用 e.val 来获取值。我可以触发 selected 值的唯一方法是使用 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)，它会在条件下正确 return false，如果它有任何值，它会 return true正如它应该。原因是如果我把它作为一个对象，它永远是真的。此方法也可以完美地处理多个 selected 选项，只需将参数 multiple="multiple" 添加到 select 标记即可。

这已经用 Select2 4.0.8、Select2 3.5.2 和 Select2 3.5.3 进行了测试（出人意料），最终可以正常工作。同样，我很确定这里的其他答案有效，但现在我不得不求助于这个诡计来让它工作（2 小时后弄清楚为什么它没有）。

Answer 6

您只需这样做：

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

Answer 7

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

在 select2 中获取所选选项的值，然后使用 jquery 将该值设置为输入文本？

Get the value of selected option in select2 and then set the value to an input text using jquery?

javascript

jquery

jquery-select2

select2