Javascript 更改下拉列表的样式

我有一个基于每个下拉值的4个下拉列表，另一个下拉列表将改变我尝试使用CSS、jquery和javascript改变下拉列表的样式。 我几乎得到了下拉列表的风格，功能也很好，但我陷入了困境 在jquery中，所做的是

$(document).ready(function(){
  $("select").each(function(){
    $(this).wrap('<div class="selectbox"/>');
    $(this).after("<span class='selecttext'></span><span class='select-arrow'></span>");
    var val = $(this).children("option:selected").text();
    $(this).next(".selecttext").text(val);
    $(this).change(function(){
      var val = $(this).children("option:selected").text();
      $(this).next(".selecttext").text(val);
    });
  });
});

$（文档）.ready（函数（）{
$（“选择”）。每个（函数（）{
$（此）.wrap（“”）；
$（此）。在（“”）之后；
var val=$（this）.children（“选项：选定”）.text（）；
$（this.next（“.selecttext”）.text（val）；
$（this）.change（function（）{
var val=$（this）.children（“选项：选定”）.text（）；
$（this.next（“.selecttext”）.text（val）；
});
});
});

因此，对于所有“选择”，它会自动用div换行，然后放置两个跨距。 因此，当我第一次更改1下拉列表中的值时，第二个下拉列表中的值将更改。 当我再次更改1下拉列表的值时，2下拉列表的值不会重置为默认值。

---

因为范围保留了以前选择的值。。我怎样才能克服这个问题。

您是否尝试过这样做：

$(document).ready(function(){
  $("select").each(function(){
    $(this).wrap('<div class="selectbox"/>');
    $(this).after("<span class='selecttext'></span><span class='select-arrow'></span>");
    var val = $(this).children("option:selected").text();
    $(this).next(".selecttext").text(val);
  });
    $("select").change(function(){
      var val = $(this).children("option:selected").text();
      $(this).next(".selecttext").text(val);
    });
});

$（文档）.ready（函数（）{
$（“选择”）。每个（函数（）{
$（此）.wrap（“”）；
$（此）。在（“”）之后；
var val=$（this）.children（“选项：选定”）.text（）；
$（this.next（“.selecttext”）.text（val）；
});
$（“选择”）.change（函数（）{
var val=$（this）.children（“选项：选定”）.text（）；
$（this.next（“.selecttext”）.text（val）；
});
});

您应该解释其中涉及数据库的所有html，以填充所有四个下拉列表，因此我无法在JSFIDLE中解释。。因为实施同样的方法需要更多的时间。实际的问题是什么？。您的问题标题是更改css的样式，但您的内容不喜欢这样。我需要更改下拉列表的样式，使其外观与常规下拉列表不同。。我有一个css文件，我正试图通过上面提到的jquery添加它们。我有一个解决方案：我们可以为每个下拉列表动态添加一个div id和span id，一旦更改每个下拉列表，我们就可以将span文本从先前选择的值清除为默认值。