javascript - querySelectorAll 没有选择合适的元素

Question

我有一个 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>

Answer 1

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

这是一个示例 ( fiddle ):

<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>