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

Posted

技术标签:

【中文标题】获取select2中选定选项的值，然后使用jquery将值设置为输入文本？【英文标题】：Get the value of selected option in select2 and then set the value to an input text using jquery? 【发布时间】：2017-06-14 02:51:07 【问题描述】：

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

关于我做错了什么的任何想法？

谢谢！

【问题讨论】：

你试过var data = $(".select2").val() 【参考方案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);
    )
  );

【讨论】：

初选怎么样？在 change/select2:select 事件不会触发它。 initSelection 已被弃用，现在引用到某些数据适配器... 如何获取id？【参考方案2】：

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

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

【讨论】：

【参考方案3】：

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

【讨论】：

感谢您提供替代解决方案！【参考方案4】：

你可以这样做：

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

【讨论】：

【参考方案5】： 
$("#e15").on("change", function () 
    $("#e15_val").html($("#e15").val());
);

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation would greatly improve its long-term value 通过展示为什么这是一个很好的解决问题的方法，并将使其对未来有其他类似问题的读者更有用。请edit您的回答添加一些解释，包括您所做的假设。【参考方案6】：

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

$('.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 案例时获取所有事件。我还看到你可以使用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 小时后弄清楚为什么它没有）。

【讨论】：

【参考方案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将值设置为输入文本？的主要内容，如果未能解决你的问题，请参考以下文章

在 Select2 事件中获取选定的选项，当可以选择多个选项时

提交更新后 select2 的选择选项丢失以及如何从数据库中设置选定的值

在与下拉列表分开的输入中显示 select2“药盒”

Vue Js没有在select2中获取选择选项值

从 select2 中的选定选项获取 optGroup id

使用 asp.net 从后面的代码中获取 Jquery 的 Select2 的多个选定值