Question

无法设置下拉选定索引：未捕获的类型错误：无法设置 null 属性（设置‘selectedIndex’）

2022-09-01

297

javascript html forms url-parameters

这应该很简单，但不知道问题出在哪里。我需要从 url 参数中获取值，然后根据索引号选择下拉列表的选项。 URL 类似于：

..../page.html?tid=5

HTML 在这里

<select id="form-dropdown-field">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
    <option value="F">F</option>
    <option value="G">G</option>
    <option value="H">H</option>
</select>

这是 JS 部分：

        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);
        const tid = parseInt(urlParams.get('tid')) - 1;
        console.log(tid);

        document.getElementById("form-dropdown-field").selectedIndex = tid.toString() ;

我毫无问题地获得了 url 参数值。它在 console.log() 输出中显示 4 。但是我得到了以下错误：

Uncaught TypeError: Cannot set properties of null (setting 'selectedIndex')

更新：

我的脚本已经在 <head><script>...</script></head> 标签中，正如 @Mina 在评论中所建议的那样。并且我在 <script> 标签中添加了 defer 属性。

Answer 1

好吧，我也测试过了。如果我按照@Mina 的建议做，似乎对我有用：

<head>
<script src="index.js" defer></script>
</head>

是否还有其他事情导致这种情况，例如 <select> 字段是否始终存在？

Answer 2

这与 defer 或其他内容无关。

我将 js 代码部分放在 select 标签之后，现在它可以工作了。

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>      
        <select id="form-dropdown-field">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
            <option value="E">E</option>
            <option value="F">F</option>
            <option value="G">G</option>
            <option value="H">H</option>
        </select>
        <script>
            const urlParams = new URLSearchParams(window.location.search);
        
            const tid = parseInt(urlParams.get('tid')) - 1;
                
            document.getElementById("form-dropdown-field").selectedIndex = tid;
        </script>
    </body>
</html>