querySelectAll未选择正确的元素

querySelectAll Not Selecting Proper Elements

本文关键字：元素 选择 querySelectAll      更新时间：2024-04-22

我有一个下拉菜单，ID很长，但其中一部分是_Country。我有一个ID很长的文本框，但其中一部分是_State。

每当有人在"国家"下拉列表中选择某个选项时，我都会尝试从下拉列表"国家"中获取值，并将其放入文本框"状态"中。

这是我现在拥有的JavaScript。在我尝试使用通配符之前，它运行良好，但现在不起作用了。

<script type="text/javascript">
document.querySelectorAll('[id*="_Country"]').onchange = replicate;
function replicate() {
    var tb1 = document.querySelectorAll('[id*="_Country"]');
    var tb2 = document.querySelectorAll('[id*="_State"]');
    tb2.value = tb1.value;
}
</script>

querySelectorAll()返回一个NodeList。使用querySelector()只获得一个节点。

这是一个样品（小提琴）：

<select id="test_Country">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select id="test_State">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<script>
    (function() {
        var country = document.querySelector('[id*="_Country"]');
        var state = document.querySelector('[id*="_State"]');
        country.addEventListener("change", function(e) {
            state.value = country.value;
        });
    })();
</script>
相关文章：