Javascript 使用jquery设置样式选择下拉列表

我正在使用jQuery设置select下拉列表的样式。除所选选项不显示为默认选项外，所有选项都可以正常工作。我的页面上有多个下拉列表，每个下拉列表在不同的位置都有自己的默认选择，因此我无法将一个特定位置定义为选中位置。我正在尝试默认显示带有selected=“selected”的

你能帮我做这个吗

$（'select'）。每个（函数（）{
变量$this=$（this），
numberOfOptions=$（this）.children（'option'）.length；
$this.addClass（'select-hidden'）；
$this.wrap（“”）；
$this.after（“”）；
var$styledSelect=$this.next（'div.select-styled'）；
$styledSelect.text（$this.children（'option'）.eq（）.text（））；
var$list=$（“
”{
“类”：“选择选项”
}).insertAfter（$styledSelect）；
对于（var i=0；i”{
text:$this.children（'option'）.eq（i）.text（），
rel:$this.children（'option'）.eq（i）.val（）
}).附件（$清单）；
}
var$listItems=$list.children（'li'）；
$styledSelect.单击（函数（e）{
e、 停止传播（）；
$（'div.select-styled.active'）。不是（这个）。每个（函数（）{
$（this）.removeClass（'active'）.next（'ul.select options'）.hide（）；
});
$（this）.toggleClass（'active'）.next（'ul.select options'）.toggle（）；
});
$listItems。单击（函数（e）{
e、 停止传播（）；
$styledSelect.text（$（this.text（））.removeClass（'active'）；
$this.val（$（this.attr（'rel'））；
$list.hide（）；
//log（$this.val（））；
});
$（文档）。单击（函数（）{
$styledSelect.removeClass（'active'）；
$list.hide（）；
});
});

选择1
选择2
选择2
您没有针对正确的元素，使用以下语句是错误的

$styledSelect.text($this.children('option').eq().text());

方法
.eq（）
接受元素的索引

我认为您需要获取
：selected
选项的文本，因此请使用选择器

$styledSelect.text($this.children('option:selected').text());


$（'select'）。每个（函数（）{
变量$this=$（this），
numberOfOptions=$（this）.children（'option'）.length；
$this.addClass（'select-hidden'）；
$this.wrap（“”）；
$this.after（“”）；
var$styledSelect=$this.next（'div.select-styled'）；
$styledSelect.text（$this.children（'option:selected'）.text（））；
var$list=$（“
”{
“类”：“选择选项”
}).insertAfter（$styledSelect）；
对于（var i=0；i”{
text:$this.children（'option'）.eq（i）.text（），
rel:$this.children（'option'）.eq（i）.val（）
}).附件（$清单）；
}
var$listItems=$list.children（'li'）；
$styledSelect.单击（函数（e）{
e、 停止传播（）；
$（'div.select-styled.active'）。不是（这个）。每个（函数（）{
$（this）.removeClass（'active'）.next（'ul.select options'）.hide（）；
});
$（this）.toggleClass（'active'）.next（'ul.select options'）.toggle（）；
});
$listItems。单击（函数（e）{
e、 停止传播（）；
$styledSelect.text（$（this.text（））.removeClass（'active'）；
$this.val（$（this.attr（'rel'））；
$list.hide（）；
//log（$this.val（））；
});
$（文档）。单击（函数（）{
$styledSelect.removeClass（'active'）；
$list.hide（）；
});
});

选择1
选择2
选择3
如果您不介意的话，为什么需要使用jQuery而不是CSS？我建议用CSS而不是JS来做样式，我也希望用CSS来做，但没有得到想要的样式。我不能设计下拉列表。它显示特定于浏览器的下拉列表。有没有一种方法可以改变这种风格？