Javascript Help about “document.getElementById” please
Question
Here's my code:
<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>
In this code what I want to do is when the user clicks an image, the select option value will change.
If the <select id="list"> select has an id it will work fine, but in my case, the select option has no id, but before the select there is a class "catProdAttributeItem" . How do I make it work with document.getElementById and select option?
2 answers
solution1
0 2013-10-23 18:59:50
Since the select element is within the catProdAttributeItem div, you can select it using the childNodes property
var selectList = document.getElementById("catProdAttributeItem").childNodes[0];
Rest of the code should work as it is.
solution2
0 ACCPTED 2013-10-23 19:01:32
Select element is the child of Div, so you need to access the child element. For that,use following :
var selectList = document.getElementById("catProdAttributeItem").children[0];
Here is the working demo : http://jsfiddle.net/spdX3/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.