jQuery嵌套在DataList标签中 - 无法获取所选项目
问题描述:
我正在为输入标签实现自动完成功能。jQuery嵌套在DataList标签中 - 无法获取所选项目
当我开始输入时,我看到下拉列表,然后选择其中一个项目。 当我试图到达选定的项目时,我只是从选项列表中选择第一个选项,而不是我选择的选项。
这是什么样子:
<input id="chosenTxt" list="someList">
<datalist id="someList">
<select id="selectList">
<option value="First" label="one" />
<option value="Second" label="two" />
<option value="Third" label="three" />
</select>
</datalist>
</input>
再比如说我选择 “第二”,并使用
$("#selectList option:selected").attr("label")
我得到 “一个”。
供参考:我知道这是建立在jQuery UI,但我不想使用它。
答
你需要监听输入元素上input
事件和遍历 的选项,检查是否输入value
等于一个选项的value
。
您可以从数据列表上的options
属性中访问数据列表元素的选项。
这里是一个例子。
$('#chosenTxt').on('input', function() {
$that = $(this);
$.each($('#someList')[0].options, function(idx, opt) {
if($that.val() == opt.value) {
console.log(opt.label)
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="chosenTxt" list="someList">
<datalist id="someList">
<select id="selectList">
<option value="First" label="one" />
<option value="Second" label="two" />
<option value="Third" label="three" />
</select>
</datalist>
+0
这不起作用。如果我有两个相同的值,但标签不同,我会每次都拿到第一个 –
如果你不使用jQueryUI的的自动完成自动完成至极你用? –
我已经实施了一个 –
很重要,因为那么我们知道如何回答你的问题,或者你可以做一个小提琴? –