Change the style of the drop down

Question

I have a 4 drop down list based on each drop down value the other drop down will change i tried to change the style of the drop down list using CSS and jquery and javascript. I almost got the style of the drop down and the functionality also works fine, but where i am stuck is In the jquery what is done is

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

so for all the select it automatically wraps with div and after that the 2 spans are placed. So when i change the value on the 1 drop down for the first time the values of the 2nd drop down is changed . When i again change the value of the 1 drop down the 2 drop down values does not reset to the default value. Because the span hold the value of the previously selected value.. How can i overcome this.

Answer 1

Have you tried like this:

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