如何根據從第一個下拉菜單自動更改的第二個下拉菜單更改第二個文本框的值？

Question

我有2個下拉菜單，當我更改第一個下拉菜單時，第二個的值也會相應更改。 還有2個文本框，這2個下拉菜單中的每一個都有1個。

當第一個下拉菜單更改時，我運行AJAX並將mySQL中的值顯示到第一個文本框中。 正如我所說，第二個下拉菜單的值也已更改。

我的問題是如何根據從第一下拉列表自動更改的第二下拉列表更改第二文本框的值？

這就是我更改第一個下拉菜單時所稱的

    function getVariety(seed_name) {        


    var strURL="findVariety.php?seed_name="+seed_name;
    var req = getXMLHTTP();

    if (req) {

        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                // only if "OK"
                if (req.status == 200) {                        
                    document.getElementById('seed_variety_show').innerHTML=req.responseText;            

                } else {
                    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                }
            }               
        }           
        req.open("GET", strURL, true);
        req.send(null);
    }       
}

findVariety.php

----mysql config variables------
.
.
<select  class="form-control c-square c-theme input-lg" name="seed_variety">
<option value="">Επίλεξε</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value="<?=$row['sv_variety_name']?>"><?=$row['sv_variety_name']?></option>
<? } ?>
</select>

Answer 1

使用value屬性而不是innerHTML 。 innerHTML用於將html內容推送到元素，而設置諸如input / select類的form元素的值，使用value

document.getElementById('seed_variety_show').value=req.responseText;

要更改第二個文本框的值，請在第二個select上使用onchange偵聽器。

由於選擇是動態添加的，因此您需要使用event delegation 。

嘗試這個：

$('body').on('change', '[name="seed_variety"]', function() {
  alert(this.value);
});