获取表单发送的值与下拉列表中显示的值不一致时Select下拉列表的值

Question

我有一个表单，其中有以下Select下拉列表。

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

在这里，数据是从数据库发送的控制器

选择数据如下图

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

现在，我有另一个disabled字段，一旦用户改变selectoption，它应该获得值

<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);

});

现在，<disabled>输入字段中的值显示为

opt001或opt002等等。

我想把值显示为

值1或值2.

我该怎么做?

Answer 1

这段代码可以运行。

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