更改只读输入值 <select>期权变更

Question

I want to display the value in a "select > option" in an based on the location selected from my tag.

Here is the 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>

And here is the 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"));
});
});

I'm still getting the hang on javascript so a detailed explanation won't hurt. Thanks in advance.

Answer 1

I am not sure, if this is what you need, but I think it should be: JSfiddle

Here is the JS code:

$(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

From what I understand, you want to update the text shown in the readonly text box with the value attribute of the selected option from the dropdown.

To do this, you just need to update the val of your read-only text box to the val of the drop-down whenever change event is fired.

 $(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

If I assume correctly, you want this:

1) initialization of the select option at document ready, that strange thing the code with filter() was trying to do.

2) Capture the change event on the select and show the value of the current selected option on the input. This is what the live() ( deprecated ) part was trying to do.

 $(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">