Question

我正在尝试从'select'标签显示一个子元素属性，并且我使用document.getElementsByTagName命令来执行此操作，我期望的显示是'john dalton'看起来来源！但浏览器不显示因为我希望在警报中只是未定义的消息。我的来源是这样的：

<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>

Answer 1

试试这个，

alert(document.getElementsByTagName('select')[0].childNodes[1].value);

第0个元素是文本元素。

Note: Whitespace inside elements is considered as text, and text is considered as nodes. Comments are also considered as nodes.

Answer 2

当您拥有<select>时，您可以轻松访问这些选项。

document.getElementsByTagName('select')[0].options

＆＃34;选项＆＃34;是您的选择中所有选项的数组，因此您可以通过这种方式访问您的值：

document.getElementsByTagName('select')[0].options[0].value

您还可以通过以下方式获得快捷方式：

document.getElementsByTagName('select')[0][0].value

Answer 3

如果我将静态代码编写为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);
}

使用DOM通过父元素属性访问子元素属性

3 个答案: