javascript尝试将选择框中的数据库生成文本复制到文本框

Question

我正在尝试制作一个包含大陆、地区、国家、省、市、区和村庄的链式下拉列表，但我被困在国家/地区。

我的下拉列表要求我使用数据库中的 id 来链接所有下拉列表，因此要获取文本名称，我通常使用此方法：

国家：

<select name="loc_country" class="loc_country loc5" id="loc_country" onchange="javacript: var valor2 = this.options[selectedIndex].text; document.getElementById('loc_country_real').value = valor2;">
<option value="0">-Select-</option>
</select>                   
<input type="text" id="loc_country_real" name="loc_country_real">

但是这次这种方法不起作用，所以我尝试了另一种方法：

  <select name="loc_country" class="loc_country loc5" id="loc_country">
    <option value="0">-Select-</option>
    </select>
 <input type="text" id="loc_country_real" name="loc_country_real">

和js：

$("#continent").change(function () {
    $("#loc_country_real").val($('#loc_country').text());
});

并希望当我的 id="continent" 选择框发生变化时，该值会更新。
而且该方法也失败了，因为“loc_country_real”中给出的值与选择框“loc_country”不匹配

（例如：当我在大陆选择框上选择欧洲时，loc_country 选择框会给我一个列表欧洲国家，但“loc_country_real”中的值将来自国家/地区的亚洲）

我需要使“loc_country”和“loc_country_real”中的文本匹配，但我不知道该怎么做，请帮忙。

Answer 1

试试这个：

更改您的选择以使 VALUE 与您想要的文本匹配 E.G：

<select name="loc_country" class="loc_country loc5" id="loc_country">
  <option value="0">--Select--</option>
  <option value="USA">USA</option>
  <option value="Canada">Canada</option>
  <option value="Mexico">Mexico</option>
</select>

然后您可以使用document.getElementById('loc_country').value 来获取选定的选项值

// Change `loc_country_real`'s value to match `loc_country` selected option
document.getElementById('loc_country_real').value = document.getElementById('loc_country').value;

或者jQuery方式：

$('#loc_country').change(function(){
    $('#loc_country_real').val($('#loc_country').val());
});

编辑，因为你提到你不能使用价值：

$('#loc_country').change(function(){
    var textOfSelectedOption = $("#loc_country option:selected").text();
    $('#loc_country_real').val(textOfSelectedOption);
});