如何根据从第一个下拉列表自动更改的第二个下拉列表更改第二个文本框值？

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 内容推送到元素，而设置form 元素的值，如input/select，使用value

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

要更改第二个文本框的值，请在第二个 select 上使用 onchange 侦听器。

由于选择是动态添加的，您需要为此使用event delegation。

试试这个：

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