web-dev-qa-db-ja.com

select2で選択したオプションの値を取得し、jqueryを使用して入力テキストに値を設定しますか？

私は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>

私が間違っていることのアイデアはありますか？

ありがとう！

javascriptjqueryjquery-select2select2
7
neek05

あなたはほとんどそこにいます。ドロップダウンの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);
    })
  });
22
Matt Spinks

ドキュメントによると https://select2.org/programmatic-control/events#event-data

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

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">
2
gaetanoM
$("#e15").on("change", function () {
    $("#e15_val").html($("#e15").val());
});
0
Shahidul Islam

ここに追加しているのは、数か月前にここで提供された答えが私のために働いたが、今ではブードゥー教が起こり、選択したアイテムの価値を得るための唯一の方法は次のことをしていたからです：

_$('.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)を実行して、変更時のケースをトリガーしたときにすべてのイベントを取得する必要がありました。また、_e.added.text_を使用してオプションのテキストを取得し、_e.added.id_を使用してIDを取得できることも確認しました。これは、前述の_e.val_に似ています。

条件に対してe.valeを再度テストする必要がある場合は、必ず文字列または数値に変換してください。このような：

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

このようにして、値が空（false）の場合、条件で適切にfalseを返し、値が含まれている場合は、本来どおりtrueを返します。その理由は、オブジェクトとして残すと、常に真実になるからです。また、このメソッドは、パラメーター_multiple="multiple"_をselectタグに追加するだけで、複数の選択オプションで問題なく機能します。

これはSelect2 4.0.8、Select2 3.5.2、Select2 3.5.3で（驚くべきことに）テストされ、機能しました。繰り返しますが、ここでの他の答えはうまくいったと確信していますが、今度はこのトリックを使用して動作するようにしなければなりませんでした（なぜ動作しなかったのかを2時間後に解明しました）。

0
Luis Alvarado