Question

我一直在尝试将值存储在名为data-title的数据属性中，但JavaScript不会显示我在其中存储的值。一直试图将值放在警报范围内进行测试，但它不起作用。以下是我的代码。谢谢。

<select id='item_ID' onchange='changeValue();'>
    <option data-title="Title 1">1</option>
    <option data-title="Title 2">2</option>
    <option data-title="Title 3">3</option>
    <option data-title="Title 4">4</option>
</select>

<script type="text/javascript">

function changeValue(){

    var option=document.getElementById('item_ID');
    alert(option.getAttribute('data-title'));
}
</script>

Answer 1

select元素没有data-title属性。选项元素可以。

Answer 2

那是因为你的select元素没有data-title属性。只有选项元素才有它们。

这是一个有效的例子：

var options = document.getElementsByTagName("option");
for (var i = 0; i < options.length; i++) {
    var title = options[i].getAttribute("data-title");
    alert(title);
}

http://jsfiddle.net/E49hm/

Answer 3

要从当前选定的data-title中检索option值，因为您的select元素本身缺少该属性：

function changeValue(){
    var select = document.getElementById('item_ID'),
        option = select.getElementsByTagName('option')[select.selectedIndex];
    alert(option.getAttribute('data-title'));
}

Answer 4

你想：option.value

<select id='item_ID' onchange='changeValue();'>
    <option data-title="Title 1">1</option>
    <option data-title="Title 2">2</option>
    <option data-title="Title 3">3</option>
    <option data-title="Title 4">4</option>
</select>

<script type="text/javascript">

function changeValue(){
    var option=document.getElementById('item_ID'); 
    console.log(option.value);
}
</script>

尝试获取数据属性时，JavaScript返回NULL / Undefined

4 个答案: