Как сделать эту функцию jQuery более элегантной?

Question

На моей странице у меня есть выпадающее поле выбора со значением по умолчанию (пустое).Когда пользователь выбирает запись, отображается соответствующая форма для этого типа записи.

Пара проблем..

1. Код не является СУХИМ и кажется более подробным, чем это необходимо, поэтому его нелегко поддерживать / расширять.
2. Когда пользователь выбирает что-либо, заполняет форму, переходит на следующую страницу, а затем нажимает кнопку "Назад", поле выбора предварительно выбирается по его выбору, но поскольку не было .change() в противном случае поле формы не отображается.Они должны выбрать другой <option>, затем нажмите вернуться к их первоначальному выбору, чтобы вернуть свой форум обратно.

Вот код:

<script type="text/javascript">
    $(document).ready(function(){

        $('#select_type').change(function () {
            $('fieldset').css('display','none'); # hide all the forms on the page
            var selectval = $('#select_type').val();
            if (selectval == 'instance')
            {
                $('#instance').toggle();
            }
            if (selectval == 'mob')
            {
                $('#mob').toggle();
            }
            if (selectval == 'dailyquest')
            {
                $('#dailyquest').toggle();
            }
            if (selectval == 'repeatablequest')
            {
                $('#repeatablequest').toggle();
            }
            if (selectval == 'zonequest')
            {
                $('#zonequest').toggle();
            }
            if (selectval == 'reward')
            {
                $('#reward').toggle();
            }
        });

    });
</script>

Помогите JS-гуру SO!

Answer 1

Вместо нескольких предложений IF вы можете выполнять итерацию по массиву значений.Но в этом случае, если нет других требований, то просто:

$(document).ready(function(){
     var select = $('#select_type');
     $('#' + select.val()).toggle(); // Toggle the preset value
     select.change(function () {
         $('fieldset').css('display','none');
         $('#' + $(this).val()).toggle();
     });
});

Должно быть достаточно.

Answer 2

$(document).ready(function() {
  $("#select_type").change(function () {
    $("fieldset").css("display", "none");
    $("#" + $(this).val()).toggle();
  }).change();
});

Answer 3

1. Вы могли бы изменить все эти операторы if на некоторые выражения or(||).
2. В ready() вы можете проверить, имеют ли поля значение по умолчанию.Если нет, то вы могли бы вручную запустить функцию change().

Answer 4

Я, вероятно, не стал бы использовать поле выбора, поскольку поля выбора являются хорошим выбором только тогда, когда параметры известны пользователю до того, как он их отключит.Таинственное мясо не допускается.Вот хорошая статья о входные данные, зависящие от выбора.

Мой взгляд на эту проблему:* Должен быть показан только раздел, связанный с выбранной опцией, поэтому я не хочу использовать переключение.

$(function(){
  var sel = $("#select_type");
  $("#"+sel.val()).show();
  sel.change(function(){
    $(this).children("option").each(function(){
      $("#"+this.value)[this.selected ? "show" : "hide"]();
    });
  });
});