Clever Geek Handbook

How can I make jQuery function more elegant?

On my page, I have a dropdown select box with a default (empty). When the user selects a record, the corresponding form for that record type is displayed.

A couple of problems ..

  • The code is not DRY and seems more verbose than it should be, so it is not easily maintainable / extensible.
  • When the user selects something, fills out the form, navigates to the next page and then clicks the back button, the select box is preselected with their selection, but since there was no event .change()

    , the form field is not displayed. They have to choose a different <option>

    one and then go back to their original choice to get their forum back.

Here's the code:

<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>

Help the JS guru SO!

0


source to share


4 answers


Instead of multiple IF clauses, you can iterate over an array of values. But in this case, unless there are other requirements, simply:

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


Should be enough.

+7


source 


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


+5


source


  • You can change all of these if statements to some or (||) expressions.
  • In ready () mode, you can check if the fields have a default value. If not, you can manually call change ().
0


source


I probably won't use a select box as selected blocks are a good choice when the options are known to the user before they pull it out. No mysterious meat is allowed. Here is a good article on selection dependent inputs .

My solution to this problem: * Only the section associated with the selected option should be shown, so I don't want to use the radio button.

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


source






More articles:


All Articles