Изменить входное значение ReadOnly при изменении опции <select>

Question

Я хочу отобразить значение в «select> option» в зависимости от местоположения, выбранного из моего тега.

Вот HTML:

<select name="stateCoord" id="stateCoord" autocomplete="off">
       <option selected="selected">SELECT STATE</option>
       <option value="lg">Lagos</option>
       <option value="abj">Abuja</option>
</select>

<input type="text" name="stateCoordInfo" value="" id="stateCoordInfo"  readonly>

А вот и JavaScript:

$(document).ready(function() {

$("#stateCoord option").filter(function() {
    return $(this).val() == $("#stateCoordInfo").val();
}).attr('selected', true);

$("#stateCoord").live("change", function() {

    $("#stateCoordInfo").val($(this).find("option:selected").attr("value"));
});
});

Я все еще изучаю javascript, поэтому подробное объяснение не помешает. Заранее спасибо.

Answer 1

Если я правильно предполагаю, вы хотите это:

1) инициализация опции выбора при готовности документа, что странная вещь, которую пытался сделать код с filter().

2) Захватить событие change на select и показать значение текущей выбранной опции на входе. Это то, что пытается сделать live() ( устарела ).

$(document).ready(function()
{
    $("#stateCoord").val("").change();

    $("#stateCoord").change(function()
    {
        $("#stateCoordInfo").val($(this).val());
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="stateCoord" id="stateCoord">
  <option value="" selected>SELECT STATE</option>
  <option value="lg">Lagos</option>
  <option value="abj">Abuja</option>
</select>

<input type="text" name="stateCoordInfo" value="" id="stateCoordInfo">

Answer 2

$(document).ready(function() {

     $("body").on("change","#stateCoord",function() {

     $("#stateCoordInfo").val($(this).find("option:selected").val());

});

   $("#stateCoord").trigger("change");
});

Answer 3

Насколько я понимаю, вы хотите обновить текст, показанный в текстовом поле readonly, атрибутом value выбранного параметра из раскрывающегося списка.

Для этого вам просто нужно обновить val вашего текстового поля, доступного только для чтения, до val раскрывающегося списка при каждом событии change.

$(document).ready(function() {
  $('#stateCoord').change(function(e) {
    $('#stateCoordInfo').val($(this).val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="stateCoord" id="stateCoord" autocomplete="off">
       <option selected="selected">SELECT STATE</option>
       <option value="lg">Lagos</option>
       <option value="abj">Abuja</option>
</select>

<input type="text" name="stateCoordInfo" value="" id="stateCoordInfo"  readonly>

Answer 4

Я не уверен, если это то, что вам нужно, но я думаю, что это должно быть: JSfiddle

Вот код JS:

$(document).ready(function() {

  $("#stateCoord").change(function() {
      var value = $("#stateCoord option:selected").text();
      $("#stateCoordInfo").val(value);
  });
});