javascript - 更改下拉样式

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 个下拉菜单的值时，第 2 个下拉菜单的值也会更改。当我再次更改 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);
    });
});