Как заполнить input значением из select/option?

411

05 августа 2017, 05:43

Есть пару select'ов. В первом я выбираю город и на основе этого строиться второй select с пунктами выдачи.

когда я выбираю значение из второго select'а с пунктами выдачи (id="order_order_address_attributes_point_id"), то input должен заполняться значением из выбранного option. Не value, а именно текстом

Как это можно реализовать?

Вот html

<tr>
  <td class="ltd">
    <label for="order_order_address_attributes_point_id">Пункт выдачи <i>*</i></label>
  </td>
  <td>
    <div class="boxberry">
      <select id="order_order_address_attributes_point_id">
         <option value="0">- выберите пункт -</option>
      </select>
    </div>
  </td>
</tr>
<tr>
  <td class="ltd"></td>
  <td>
    <div class="ent-inp">
      <input id="order_order_address_attributes_point" size="30" type="text" value="">
    </div>
  </td>
</tr>

Вот скрипт:

$(document).ready(function () {
  $('#order_order_address_attributes_city').change(function () {
    var city_id = $(this).val();
    if (city_id == '0') {
      $('#order_order_address_attributes_point_id').html('<option>- выберите город -</option>');
      $('#order_order_address_attributes_point_id').attr('disabled', true);
      return(false);
    }
    $('#order_order_address_attributes_point_id').attr('disabled', true);
    $.ajax({
      type: "GET",
      url: '/delivery.json',
      data: { code: city_id },
      dataType: "json",
      success: function(result) {
        var options = '<option>- выберите пункт -</option>'
        for (i=0;i<result.length;i++) {
          options += '<option value="' + result[i][1] + '">' + result[i][0] + '</option>';
        };
        $('#order_order_address_attributes_point_id').html(options);
        $('#order_order_address_attributes_point_id').attr('disabled', false);
      }
    });
  });
});

Answer 1

C помощью функции .text(): Ее нужно использовать не от <select>, а от выбранного пункта, т.е. к селектору добавляем :selected (option:selected):

$(function() { 
  $('#select').on('change', function() { 
    result = $('#select :selected').text(); 
    $('#input').val(result); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select id="select"> 
  <option value="1">Раз</option> 
  <option value="2">Два</option> 
  <option value="3">Три</option> 
  <option value="4">Четыре</option> 
  <option value="5">Пять</option> 
</select> 
 
<input id="input" val="" type="text" />