更改下拉列表的样式

Question

我有一个基于每个下拉值的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);
    });
  });
});

所以对于所有选择它会自动用div包装，然后放置2个跨度。 因此，当我第一次更改1下拉值时，第二次下拉的值会发生变化。 当我再次更改1下拉的值时，2下拉值不会重置为默认值。 因为跨度保持先前选择的值的值。我怎样才能克服这一点。

Answer 1

你试过这样的事吗：

$(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);
    });
});