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

私はjqueryとjavascriptを使い慣れていないので、これは愚かな質問ですが、select2の選択されたオプションから取得した値をテキスト入力に設定する際に問題があります。これは私のコードです：select2で選択したオプションの値を取得し、jqueryを使用して値を入力テキストに設定しますか？

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

私が間違ってやっているの任意のアイデア？

ありがとうございます！

出典

2017-01-28 neek05

あなたは 'VARデータ= $を（」してみてくださいました。 select2 "）。val（）' –

あなたはほぼそこにいます。ドロップダウンリストの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); 
    }) 
    });

出典

2017-01-28 14:09:38

ありがとう！これは完璧に動作します。 – neek05

あなたのフィドルは働いていません。それを変更または削除してください。 –

あなたは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">

出典

2017-01-28 14:09:54 gaetanoM

代替ソリューションありがとうございます！ – neek05

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

答えて

関連する問題