javascript - Get the value of Select dropdown list when the value sent by the form and that appearing in the dropdown list are different

Question

I have a form which has the following Select dropdown list.

<select name="some_options" id="some_options">
@foreach(options as option)
<option value="{{$option->id}}">{{$option->value}}</option>
@endforeach
</select>

Here , the data are being sent from the database via the Controller

The Select data look like this

<select name="some_options" id="some_options">
<option value="opt001">Value 1</option>
<option value="opt002">Value 2</option>
<option value="opt003">Value 3</option>
<option value="opt004">Value 4</option>
<option value="opt005">Value 5</option>
</select>

Now, I have another disabled field which should get the value once the user changes the select option

<div>
<input type="text" id="some_options_cng" disabled>
</div>

My Javascript code

 var opt = $('#some_options').val();

$('#some_options').on('change',function(){

opt = $('#some_options').val();

$('#some_options_cng').val(opt);


});

Now, the value in the <disabled> input field shows as

opt001 or opt002 and so on.

I want to show values as

Value 1 or Value 2.

How do I do it?

question from:https://stackoverflow.com/questions/65923128/get-the-value-of-select-dropdown-list-when-the-value-sent-by-the-form-and-that-a

Answer 1

This code will work.

$('#some_options').change(function(){
        var opt = $("#some_options").find(":selected").text(); //This line of code is 
                                                               //important
        $('#some_options_cng').val(opt);
      })

$(document).ready(function(){
  $('#some_options').change(function(){
    var opt = $("#some_options").find(":selected").text();
    $('#some_options_cng').val(opt);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="some_options" id="some_options">
<option value="opt001">Value 1</option>
<option value="opt002">Value 2</option>
<option value="opt003">Value 3</option>
<option value="opt004">Value 4</option>
<option value="opt005">Value 5</option>
</select>
<div style="height:5px;"></div>
<div>
<input type="text" id="some_options_cng" disabled>
</div>