Преобразование UL в SELECT для мобильных устройств, а затем снова при изменении размера

У меня есть немного кода, который я запускаю, когда ширина окна меньше 400 пикселей. Он преобразует UL в выпадающее select для экономии места и дает мобильным пользователям собственный интерфейс для избранных групп.

Я обеспокоен тем, что это сломается, когда люди изменят размер окна от маленького до большого и обратно. Как сбросить мой код при изменении размера, если ширина окна больше 400 пикселей?

Вот код, который преобразует мой html в select:

http://jsfiddle.net/2GM8v/1/

    if($(window).width() < 400){ //if we're on a narrow screen

      $('section ul',this.$element).hide();

      // Create the dropdown base
      $("<select />").appendTo(".continents",this.$element);

      // Create default option "Go to..."
      $("<option />", {
        "selected": "selected",
        "value"   : "",
        "text"    : $('.continents span.selected',this.$element).text()
      }).appendTo(".continents select",this.$element);

      // Populate dropdown with menu items
      $(".continents li a",this.$element).each(function() {
        var el = $(this);
        $("<option />", {
          "value"   : el.attr("href"),
          "text"    : el.text()
        }).appendTo(".continents select",this.$element);
      });

      $(".continents select",this.$element).change(function() {

      //get the value of the selected item
      var selectVal = $(this).find("option:selected").val();

      //when the select changes, do this

      $("<select />").appendTo('.countries',this.$element);

      // Create default option "Go to..."
      $("<option />", {
        "selected": "selected",
        "value"   : "",
        "text"    : $('.countries span.selected',this.$element).text()
      }).appendTo(".countries select",this.$element);

      // Populate dropdown with menu items
      $(selectVal+" li a",this.$element).each(function() {
        var el = $(this);
        $("<option />", {
          "value"   : el.attr("href"),
          "text"    : el.text()
        }).appendTo(".countries select",this.$element);
      });

      $(".countries select",this.$element).change(function() {

        //get the value of the selected item
        var selectVal = $(this).find("option:selected").val();

        //when the select changes, do this

        $("<select />").appendTo('.languages',this.$element);

        // Create default option "Go to..."
        $("<option />", {
          "selected": "selected",
          "value"   : "",
          "text"    : $('.languages span.selected',this.$element).text()
        }).appendTo(".languages select",this.$element);

        // Populate dropdown with menu items
        $(selectVal+" li a").each(function() {
          var el = $(this);
          $("<option />", {
            "value"   : el.closest('li').data('val'),
            "text"    : el.text()
          }).appendTo(".languages select",this.$element);
        });

        $(".languages select",this.$element).change(function() {
            var selectVal = $(this).find("option:selected").val();
            $('#continue',this.$element).removeClass('disabled');
            $('#continue',this.$element).attr('href', selectVal);
        });

      });

    });

  }