1

这是我的代码：

<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…&lt;/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">select 有 id 它会正常工作，但在我的情况下， select 选项没有 id，但在 select 之前有一个 class "catProdAttributeItem"。如何使其与 document.getElementById 和 select 选项一起使用？

4

2 回答 2

0

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

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

其余代码应该按原样工作。

于 2013-10-23T18:59:50.937 回答
0

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

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

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

于 2013-10-23T19:01:32.800 回答