Javascript 从自定义列表中获取相应的值

我正在尝试为输入元素创建自定义下拉列表。在这里，我想启用选择一个预定义的输入值，并允许用户通过键入来输入自己的选择。正如您在示例中看到的，它可以工作，但若我有多个带有下拉列表的输入，它就不工作了

所以问题是如何使之成为可能

$（文档）.ready（函数（）{
//输入下拉列表
var getDataAttr；
$（文档）.on（'焦点单击'，'.input'，函数（事件）{
$（event.target）.next（'.dd_items'）.show（）；
});
$（文档）。在（'单击'，'上。选择函数（）{
$（“.input”）.val（$（this.text（））；
$（“#新类型”）.fadeOut（）；
});
$（document）.on（'focusout'，'input'，函数（）{
$（event.target）.next（'.dd_items'）.hide（）；
});
});
.wrap{
位置：相对位置；
显示：内联块；
宽度：250px；
}
.输入{
宽度：220px；
高度：30px；
}
.dd_项目{
背景色：#fff；
边框：1px实心#ccc；
显示：内联块；
左：0；
列表样式：无；
保证金：0；
填充：0；
位置：绝对位置；
顶部：34px；
最小宽度：220px；
}
.dd_项目\uu项目{
框大小：边框框；
光标：指针；
填充：8px 16px；
}
.dd_项\uu项：最后一个子项{
边界底部：0；
}
.dd_项目\uu项目：悬停{
背景色：#ddd；
颜色：#fff；
}


Sirst值
第二个值


Sirst值
第二个值

这是因为您针对的是通用元素而不是特定元素

在第二个事件侦听器中，您的目标是
'.input'
，但如果重复此操作，DOM中将有多个
'.input'
可用

您应该使用类似于
$（this）.closest（'.input'）
的内容。
这是因为您针对的是通用元素，而不是特定元素

在第二个事件侦听器中，您的目标是
'.input'
，但如果重复此操作，DOM中将有多个
'.input'
可用

您应该使用类似于
$（this）.closest（'.input'）
。
而不是使用
id
，在这种情况下，您应该使用类

通过在DOM树上下移动，可以显示和隐藏所需的元素


$（文档）.ready（函数（）{
//输入下拉列表
var getDataAttr；
$（文档）。在（'焦点单击'，'输入'，函数（）上）{
$（this.next（'.new types'）.show（）；
});
$（文档）。在（'单击'，'上。选择函数（）{
$（this.parent（）.prev（“.input”）.val（$（this.text（））；
$（this.parent（）.fadeOut（）；
});
$（document）.on（'focusout'，'input'，function（））{
$（'.new types'）.fadeOut（）；
});
});
.wrap{
位置：相对位置；
显示：内联块；
宽度：250px；
}
.输入{
宽度：220px；
高度：30px；
}
.dd_项目{
背景色：#fff；
边框：1px实心#ccc；
显示：内联块；
左：0；
列表样式：无；
保证金：0；
填充：0；
位置：绝对位置；
顶部：34px；
最小宽度：220px；
}
.dd_项目\uu项目{
框大小：边框框；
光标：指针；
填充：8px 16px；
}
.dd_项\uu项：最后一个子项{
边界底部：0；
}
.dd_项目\uu项目：悬停{
背景色：#ddd；
颜色：#fff；
}


第一个值
第一个第二个值


第二个第一个值
第二个值
第二个第三个值
第二个第四个值


第三个第一个值
第三秒值

在这种情况下，您宁愿使用类，而不是使用
id

通过在DOM树上下移动，可以显示和隐藏所需的元素


$（文档）.ready（函数（）{
//输入下拉列表
var getDataAttr；
$（文档）。在（'焦点单击'，'输入'，函数（）上）{
$（this.next（'.new types'）.show（）；
});
$（文档）。在（'单击'，'上。选择函数（）{
$（this.parent（）.prev（“.input”）.val（$（this.text（））；
$（this.parent（）.fadeOut（）；
});
$（document）.on（'focusout'，'input'，function（））{
$（'.new types'）.fadeOut（）；
});
});
.wrap{
位置：相对位置；
显示：内联块；
宽度：250px；
}
.输入{
宽度：220px；
高度：30px；
}
.dd_项目{
背景色：#fff；
边框：1px实心#ccc；
显示：内联块；
左：0；
列表样式：无；
保证金：0；
填充：0；
位置：绝对位置；
顶部：34px；
最小宽度：220px；
}
.dd_项目\uu项目{
框大小：边框框；
光标：指针；
填充：8px 16px；
}
.dd_项\uu项：最后一个子项{
边界底部：0；
}
.dd_项目\uu项目：悬停{
背景色：#ddd；
颜色：#fff；
}


第一个值
第一个第二个值