После выбора параметра в раскрывающемся списке значение будет отображаться на входе.Jquery с Ajax

Question

Я просто хочу знать, как я могу показать входное значение после выбора опции в раскрывающемся списке?В настоящее время я добавляю значение тега option.Мне просто нужно, чтобы кто-нибудь поговорил об этом.

$(document).on('click', '#promo_modal', function(e){
  e.preventDefault();

var get_id = $(this).data('poid');
//console.log(get_id);
$('#add_modal').modal('show');

  $.ajax({
    type: 'POST',
    url: 'promo_select_name.php',
    dataType: 'json',
    success: function(result){
        var promoName = '';
       $.each(result,function(index, value){
       promoName += '<option>'+value.promo_name+'</option>';
      });
      $('#select_promo').append(promoName);
    }
  });

После выбора моего промо-имени, промо-цена, которую я добавлю в свой ввод, будет показана после выбора опции.

Answer 1

Вы можете реализовать это без ajax, используя Jquery change Событие

Попробуйте подписаться

   $(document).on('change','#ddlChangeTest',function(){
   $('#txtSelectedValue').val($("#ddlChangeTest option:selected"). val())
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlChangeTest">
<option value="Selected is Option 1">Option 1</option>
<option value="Selected is Option 2">Option 2</option>
<option value="Selected is Option 3">Option 3</option>
<option value="Selected is Option 4">Option 4</option>
<option value="Selected is Option 5">Option 5</option>
</select>
<br/>
<br/>
<input type="text" id="txtSelectedValue" />

Answer 2

Попробуйте

Ниже приводится ваша функция AJAX

Просто добавьте новый атрибут к вашему <option>, как показано ниже

$(document).on('click', '#promo_modal', function(e){
  e.preventDefault();

var get_id = $(this).data('poid');
//console.log(get_id);
$('#add_modal').modal('show');

  $.ajax({
    type: 'POST',
    url: 'promo_select_name.php',
    dataType: 'json',
    success: function(result){
        var promoName = '';
       $.each(result,function(index, value){
       promoName += '<option price="'+value.promo_price+'">'+value.promo_name+'</option>';
      });
      $('#select_promo').append(promoName);
    }
  });

Теперь о событии изменения вашего выпадающего вызова после функции

$(document).ready(function(){
   $(document).on('change','#ddlChangeTest',function(){
   $('#txtSelectedValue').val($("#ddlChangeTest option:selected").attr('price'))
   });

См. Следующий пример

   $(document).on('change','#ddlChangeTest',function(){
   $('#txtSelectedValue').val($("#ddlChangeTest option:selected").attr('price'))
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select id="ddlChangeTest">
<option price="500 $">Option 1</option>
<option price="2400 $">Option 2</option>
<option price="200 $">Option 3</option>
<option price="1000 $">Option 4</option>
<option price="21000 $">Option 5</option>
</select>
<br/>
<br/>
<input type="text" id="txtSelectedValue" />

Answer 3

Согласно описанию, упомянутому в посте:

$(document).ready(function(){
  $("dropdown_selector").change(function(){
  var selectedValue = $("dropdown_selector option:selected").val();
  alert("You have selected the value - " + selectedValue);
});

Обратите внимание, что dropdown_selector - это класс или идентификатор этого конкретного элемента в этом HTML.