更改所选选项的值

Question

我有下拉菜单 select 个选项国家：

    <select name="country" id="countryId" required="required"
class="countries order-alpha form-control custom-select bg-white border-left-0 border-md">
                                <option value="">Select Country</option>
                                <option value="1"> Afghanistan</option>
                                <option value="2"> Aland Islands</option>
                                <option value="3"> Albania</option>
                                <option value="4"> Algeria</option>
                                <option value="5"> American Samoa</option>

当我 select 国家发生变化时，我得到值（数字）将其发送到服务器并获得在各州解析的州列表，城市也会发生同样的情况。填写所有字段后，formData.serialized 并发送到服务器。服务器获取国家、州和城市的数字 ID 但我想发送 country/state/ 城市的名称。所以在发送之前，我应该将 selected 值更改为 selected 文本（国家名称）。我尝试这样改变：

$("#countryId").change(function () {
 c.countrytxt = $(this).find("option:selected").text(); // get text from option
 var countryId = $("#countryId").val(); // save for send as paramet to server
 document.getElementById('countryId').value = c.countrytxt; // try set county name to value

如何实现？

Answer 1

请试试这个。

$("#countryId").change(function () {
  // get text from option
  countrytxt = $(this).find("option:selected").text(); 
  // save for send as paramet to server
  var countryId = $("#countryId").val(); 
  // try set county name to value
  $(this).find("option:selected").attr('value',countrytxt);
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="country" id="countryId" required="required"
class="countries order-alpha form-control custom-select bg-white border-left-0 border-md">
  <option value="">Select Country</option>
  <option value="1"> Afghanistan</option>
  <option value="2"> Aland Islands</option>
  <option value="3"> Albania</option>
  <option value="4"> Algeria</option>
  <option value="5"> American Samoa</option>
</select>

更改所选选项的值

Change value of selected option

javascript

jquery

select

html-select

dropdown