使用DOM通过父元素属性访问子元素属性
[英]Accessing child element property through parent element property with DOM
问题描述
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. 
我试图显示来自'select'标签的子元素属性，并且我使用document.getElementsByTagName命令执行此操作，我希望显示的是'john dalton'的外观，但是下面的浏览器却没有显示，因为我期望的只是未定义警报中的消息。 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 个解决方案
解决方案1
1 已采纳 2015-04-15 05:44:09
try this, 尝试这个，
alert(document.getElementsByTagName('select')[0].childNodes[1].value);
0th element is a text element. 第0个元素是文本元素。
Note: Whitespace inside elements is considered as text, and text is considered as nodes. 注意：元素内部的空格被视为文本，而文本被视为节点。 Comments are also considered as nodes. 注释也被视为节点。
解决方案2
1 2015-04-15 08:27:49
When you have a <select> you can access to the options easily. 拥有<select>您可以轻松访问选项。
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
解决方案3
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, 每个答案都运行良好，如果我以Nannakuhtum的示例形式编写静态代码，不幸的是，在我的情况下，我使用javascript这样动态地填充了选项值，
<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);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.