更改只讀輸入值 <select>期權變更

Question

我想根據從標簽中選擇的位置，在“選擇>選項”中顯示值。

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

我不確定這是否是您需要的，但是我認為應該是： JSfiddle

這是JS代碼：

$(document).ready(function() {

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

Answer 2

$(document).ready(function() {

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

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

});

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

Answer 3

據我了解，您想使用下拉菜單中所選選項的value屬性更新readonly文本框中顯示的文本。

要做到這一點，你只需要更新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

如果我假設正確，那么您需要這樣做：

1）在文檔准備就緒時初始化select選項，那是帶有filter()的代碼試圖做的奇怪的事情。

2）在select上捕獲change事件，並在輸入上顯示當前選擇的選項的值。 這是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">