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

您可以执行以下操作：

                        var eSenseData = eSenseChart.getData();
                        var brainwaveData = brainwaveChart.getData();
                        //If there are no series, add empty ones
                        if (eSenseData.isEmpty()) {
                            eSenseData.add(attention);
                            eSenseData.add(meditation);
                            //data.add(mentalEffort);
                            //data.add(familiarity);

                            brainwaveData.add(delta);
                            brainwaveData.add(theta);
                            brainwaveData.add(lowAlpha);
                            brainwaveData.add(highAlpha);
                            brainwaveData.add(lowBeta);
                            brainwaveData.add(highBeta);
                            brainwaveData.add(lowGamma);
                            brainwaveData.add(highGamma);
                        }
                        //Get Old Data, take most recent 20 entries and graph them
                        var acceptableEntries = 20;
                        //If the number of entries is less than acceptableEntries
                        if (eSenseData.get(0).getData().size() < acceptableEntries) {
                            eSenseData.get(0).getData().add(new Data<>(eSenseData.get(0).getData().size(), packet.getAttention()));
                            eSenseData.get(1).getData().add(new Data<>(eSenseData.get(1).getData().size(), packet.getMeditation()));
}
else {
                            setNew(eSenseData.get(0), new Data<>(20, packet.getAttention()));
                            setNew(eSenseData.get(1), new Data<>(20, packet.getMeditation()));
}

/**
     * Removes the first entry and adds the new one.
     *
     * @param series The series to use
     * @param value The value to add
     */
    private static <X, Y> void setNew(Series<Integer, Y> series, Data<Integer, Y> value) {
        series.getData().remove(0);
        series.getData().stream().forEach(data -> {
            data.setXValue(data.getXValue() - 1);
        });
        series.getData().add(value);
    }

Answer 5

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

Answer 6

我在这里添加此内容是因为几个月前，这里提供的答案对我有用，但是现在，发生了一些伏都教，而我获取所选项目的价值的唯一方法是执行以下操作：< / p>

$('.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个小时之后才弄清楚为什么它不起作用）。

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

6 个答案: