Javascript 使用自定义选项显示特定内容

我将此代码用于自定义选择：

我还尝试在选择某个选项时显示特定内容。我尝试了一些“交换内容”javascript，但它不能与此自定义选择一起使用

事实上，它确实有效，但仅适用于“原始”select元素，但在我将其放入显示时：none仅适用于我的自定义select它不再有效，

如果有人有代码显示此自定义选择选项的特定内容，我将不胜感激

否则，如果您需要，这里是我的测试代码：

/*按钮列表*/
$（文档）.ready（函数（）{
$（“.custom select”）.change（函数（）{
$（this）.find（“选项：选中”）.each（函数（）{
var optionValue=$（此）.attr（“值”）；
如果（选项值）{
$（“.liste”）.not（“.”+optionValue.hide（）；
$（“+optionValue）.show（）；
}否则{
$（“.liste”）.hide（）；
}
});
}).change（）；
});
/*Btn内容显示*/
jQuery（function（）{；
$（'.swap按钮'）。单击（函数（）{
$（'.targetDiv'）.hide（）；
$（'#div'+$（this.attr（'target'））.show（）；
$（'.swap button'）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
});
});
/*自定义选择*/
变量x，i，j，l，ll，sellemnt，a，b，c；
/*查找类为“custom select”的任何元素：*/
x=document.getElementsByClassName（“自定义选择”）；
l=x.长度；
对于（i=0；i
/*按钮列表*/
李斯特先生{
显示：无；
利润率：15px 15px；
}
.targetDiv{
显示：无；
利润率：15px 15px；
}
.交换按钮{
显示：内联块；
背景：#ffff；
光标：指针；
颜色：#00205b；
}
.主动{
背景：#00205B；
颜色：#eee；
显示：内联；
}
/*自定义选择：*/
/*容器必须相对以下位置放置：*/
.自定义选择{
位置：相对位置；
字体系列：Arial；
}
.自定义选择{
显示：；/*隐藏原始选择元素：*/
}
。选择所选{
背景色：淡蓝色；
宽度：50px；
利润率：10px；
}
/*设置“选择”元素内箭头的样式：*/
.选择所选：在{
位置：绝对位置；
内容：“；
顶部：14px；
右：10px；
宽度：0；
身高：0；
边框：6px实心透明；
边框颜色：#fff透明；
}
/*当选择框打开（激活）时，向上指向箭头：*/
.选择所选。选择箭头活动：之后{
边框颜色：透明透明#fff透明；
顶部：7px；
}
/*设置项目（选项）的样式，包括选定项目：*/
.选择项目div.。选择所选项目{
颜色：#ffffff；
填充：8px 5px；
边框：1px实心透明；
边框颜色：透明rgba（0,0,0,0.1）透明；
光标：指针；
宽度：150px；
}
/*样式项（选项）：*/
.选择项目{
位置：绝对位置；
填充：8px 5px；
背景色：淡蓝色；
最高：100%；
左：0；
右：0；
z指数：99；
宽度：150px；
利润率：10px；
}
/*关闭选择框时隐藏项目：*/
.选择隐藏{
显示：无；
}
.选择项目div:hover.。与所选项目相同{
背景色：rgba（0,0,0,0.1）；
}

挑选
橙色
柠檬
苹果