我有一个包含下拉菜单和自动完成输入的div。 我还有一个链接可以添加另一个具有相同下拉和自动完成组合的字段。
我想解决的问题是你不能拥有相同的下拉和自动完成组合。
如何检查这种独特性?
我不知道如何开始解决这个问题。 我为视觉示例创建了一个小jsfiddle。该示例不起作用,仅适用于视觉效果。
HTML:
<div class="ui-widget">
<select>
<option>Select an option</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
<input class="tags">
</div>
<a href="#" onClick='clone_div()'>Add another</a>
JS:
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C"
];
$( ".tags" ).each(function(){
$(this).autocomplete({
source: availableTags
});
});
});
function clone_div(){
$('.ui-widget:first-child').clone().prependTo('.ui-widget:first-child');
}
在这个例子中,应该只有20种可能的组合。
如果有人可以提供帮助,那就太棒了。
更新
jsfiddle目前似乎没有正确地提取jQuery。 这段代码从来没有用过,它只是一个可视化的例子,但我更新了代码,这里是codepen。