Accessing child element property through parent element property with DOM
Question
I'm trying to show a child element property from 'select' tag and I using document.getElementsByTagName command to do that, the display that I expect is 'john dalton' look source bellow!, but browser not display as I expect just undefined message in alert. my source like this:
<select style="" name="provinsi_id" class="form-control crud-edit
lookup-refresh" onchange="showoption();">
<option>john dalton</option>
<option>john rambo</option>
<script>
alert(document.getElementsByTagName('select')[0].childNodes[0].value);
<script>
3 answers
solution1
1 ACCPTED 2015-04-15 05:44:09
try this,
alert(document.getElementsByTagName('select')[0].childNodes[1].value);
0th element is a text element.
Note: Whitespace inside elements is considered as text, and text is considered as nodes. Comments are also considered as nodes.
solution2
1 2015-04-15 08:27:49
When you have a <select> you can access to the options easily.
document.getElementsByTagName('select')[0].options
The "options" is an array of all the options in your select, so you can acces to your value this way:
document.getElementsByTagName('select')[0].options[0].value
You also have a shortcut by doing this:
document.getElementsByTagName('select')[0][0].value
solution3
0 2015-04-15 09:32:30
every answer runing well, if I write static code as Nannakuhtum's sample, unfortunately in my case I use javascript to fill option value dynamicly like this,
<html>
--------
<select style="" name="provinsi_id"
class="form-control crud-edit
lookup-refresh" onchange="tampilkota();">
</select>
------------
</html>
<script>
var dataprovinsi = <?php echo json_encode($dataprovinsi); ?>;
for (i=0; i< dataprovinsi.length; i++){
var option = document.createElement("option");
option.text = dataprovinsi[i]['nama'];
option.value = dataprovinsi[i]['nama'];
var select = document.getElementById("psg_provinsi_id");
select.appendChild(option);
}
function tampilkota(){
alert(document.getElementsByTagName('select')[0].childNodes[1].value);
}
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.