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，但我不想使用它。

来源

2017-03-02 Yoni Ziv

如果你不使用jQueryUI的的自动完成自动完成至极你用？ –

我已经实施了一个 –

很重要，因为那么我们知道如何回答你的问题，或者你可以做一个小提琴？ –

你需要监听输入元素上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>

来源

2017-03-02 15:23:24 DavidDomain

这不起作用。如果我有两个相同的值，但标签不同，我会每次都拿到第一个 –

jQuery嵌套在DataList标签中 - 无法获取所选项目

回答

相关问题