我必须得到所选选项的ID。
这种方式总是返回第一个id,它返回“1”:
function myFunction() {
var skills = document.getElementById('toto');
var skillId = skills.getAttribute('data-id');
console.log(skillId);
}
<label>
Skills :
<input id="inputTest" name='skill' list='skills'>
<datalist id='skills'>
<select>
<option id="toto" data-id="1">HTML</option>
<option id="toto" data-id="2">Jquery</option>
<option id="toto" data-id="3">CSS</option>
</select>
</datalist>
</label>
<button type="button" id="button1" onclick="myFunction()"> Clickhere </button>
这种方式不起作用,它返回“null”:
<label>
Skills :
<input id="inputTest" name='skill' list='skills'>
<datalist id='skills'>
<select>
<div id="toto">
<option data-id="1">HTML</option>
<option data-id="2">Jquery</option>
<option data-id="3">CSS</option>
</div>
</select>
</datalist>
</label>
<button type="button" id="button1" onclick="myFunction()"> Clickhere </button>
<script>
function myFunction(){
var skills = document.getElementById('toto');
var skillId = skills.getAttribute('data-id');
console.log(skillId);
}
</script>
以下方式也不起作用:
...
<datalist id='skills'>
...
<script>
function myFunction(){
var skills = document.getElementById('skills');
var skillId = skills.getAttribute('data-id');
console.log(skillId);
}
</script>
如果我把id放在上面,它也不起作用..
getAttribute()
方法不可避免地与<div></div>
方法相同的getElementById()
?
我只是想了解正确的功能..
在没有datalist的情况下,他还有另一种方法吗?因为“Internet Explorer 9及更早版本或Safari中不支持datalist标记”。
非常感谢 :)
您可以使用filter()
和map()
通过匹配文本来获取选项:
function myFunction(){
var skills = document.getElementById('inputTest');
var allOption = [].slice.call(document.querySelectorAll('#skills option'));
var selected = allOption.filter(o => o.textContent == skills.value).map(el => el.getAttribute('data-id'))[0];
console.log(selected);
}
<label>
Skills :
<input id="inputTest" name='skill' list='skills'>
<datalist id='skills'>
<option data-id="1">HTML</option>
<option data-id="2">Jquery</option>
<option data-id="3">CSS</option>
</datalist>
</label>
<button type="button" id="button1" onclick="myFunction()"> Clickhere </button>
@Mamun,它的工作方式就像一个魅力,顺便说一句,我找到了另一种方法来使用Jquery:
$(document).ready(function() {
$('#button1').click(function()
{
var value = $('#inputTest').val();
console.log(($('#skills [value="' + value + '"]').data('value')));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
Skills :
<input id="inputTest" name='skill' list='skills'>
<datalist id='skills'>
<option value="HTML" data-value="1"></option>
<option value="CSS" data-value="2"></option>
<option value="Jquery" data-value="3"></option>
<option value="Java" data-value="4"></option>
</datalist>
</label>
<button type="button" id="button1"> Clickhere </button>
我希望它也可以帮到你。