Question

这是我的代码：

<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选项值将更改。

如果<select id="list"> select具有id，它将正常工作，但在我的情况下，select选项没有id，但在select之前有一个类"catProdAttributeItem"。如何使用document.getElementById并选择选项？

Answer 1

由于select元素位于catProdAttributeItem div中，您可以使用childNodes属性选择它

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

其余代码应该按原样运行。

Answer 2

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

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

以下是工作演示：http://jsfiddle.net/spdX3/

有关“document.getElementById”的Javascript帮助请

2 个答案: