Javascript 帮助 关于 “document.getElementById” 请

Javascript Help about "document.getElementById" please

本文关键字:getElementById document 帮助 关于 Javascript      更新时间:2023-09-26

这是我的代码:

<html>
    <head>
        <script>
        function changeDate(option) {
            var selectList = document.getElementById("catProdAttributeItem");
            if (option == 0) {
                selectList.selectedIndex++;
            } else if (option == 1 && selectList.selectedIndex > 0) {
                selectList.selectedIndex--;
            }
        }
        </script>
    </head>
    <body>
        <img src="img1.jpg" onclick="changeDate(0)">
        <img src="img2.jpg" onclick="changeDate(1)">
        <select id="pa_colour" name="attribute_pa_colour">
            <option value="">Choose an option…</option>
            <option value="black" class="active">Black</option>
            <option value="blue" class="active">Blue</option>
            <option value="red" class="active">Red</option>
            <option value="white" class="active">White</option>
        </select>
        <div id="catProdAttributeItem">
            <select>
                <option id="1">One</option>
                <option id="2">Two</option>
                <option id="3">three</option>
                <option id="4">Four</option>
            </select>
        </div>
    </body>
</html>

在此代码中,我要做的是当用户单击图像时,选择选项值将更改。

如果选择<select id="list">有一个id,它将正常工作,但就我而言,选择选项没有id,但在选择之前有一个类"catProdAttributeItem"。如何使其与 document.getElementById 一起使用并选择选项?

Select 元素

是 Div 的子元素,因此您需要访问子元素。为此,请使用以下内容:

var selectList = document.getElementById("catProdAttributeItem").children[0];

这是工作演示: http://jsfiddle.net/spdX3/

由于 select 元素位于 catProdAttributeItemdiv 中,因此可以使用 childNodes 属性选择它

var selectList = document.getElementById("catProdAttributeItem").childNodes[0];

其余代码应按原样工作。