Получите значение выбранной опции в 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

Ваша скрипка не работает. Plase измените его или удалите. –

Вы можете использовать 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?

ответ

Смежные вопросы