Make if/else if statement less clumsy. Novice here

Although this is a form created in Breezingforms for Joomla, my question is more of a generic javascript question. I am very new to javascript so hopefully someone can answer this easily. This is being called upon initialization of a form.

I am using a javascript loop in a selection list object to hide/unhide various sections of a form, depending on the selection list choice. I'm trying to make the if/else if statements less clumsy. I'm sure there is a way to make this shorter and more concise, but being such a novice, I haven't been able to figure it out.

On a side note (not as important at the moment, but it will be), I'd like to use this script for other selection list calls, with minor variations. I still am not too clear on reusing code. If someone has any comments on that, it would be appreciated.

BTW, I am even more of a novice at jQuery, so if you go there, be VERY kind! :)

var selListVal = "";
var selListInput =  JQuery("[name=\"mySelectionList[]\"]");
for (var i = 0; i < selListInput.length; i++)
 if (selListInput[i].value) {
  if (selListVal != "") selListVal += ",";
   selListVal += selListInput[i].value;
 }
    if( selListVal == "myselection01" ){
      ToggleFields('on', 'section', 'mysection01A', DeactivateField);
      ToggleFields('on', 'section', 'mysection01B',开发者_JAVA技巧 DeactivateField);
      } 
    else if( selListVal == "myselection02" ){
      ToggleFields('on', 'section', 'mysection01A', DeactivateField);
      ToggleFields('on', 'section', 'mysection01B', DeactivateField); 
      ToggleFields('on', 'section', 'mysection02A', DeactivateField);
      ToggleFields('on', 'section', 'mysection02B', DeactivateField);
      }
    else if( selListVal == "myselection03" ){
      ToggleFields('on', 'section', 'mysection01A', DeactivateField);
      ToggleFields('on', 'section', 'mysection01B', DeactivateField);
      ToggleFields('on', 'section', 'mysection02A', DeactivateField);
      ToggleFields('on', 'section', 'mysection02B', DeactivateField);
      ToggleFields('on', 'section', 'mysection03A', DeactivateField);
      ToggleFields('on', 'section', 'mysection03B', DeactivateField);
      }
     else {
      ToggleFields('off', 'section', 'mysection01A', DeactivateField);
      ToggleFields('off', 'section', 'mysection01B', DeactivateField);
      ToggleFields('off', 'section', 'mysection02A', DeactivateField);
      ToggleFields('off', 'section', 'mysection02B', DeactivateField);
      ToggleFields('off', 'section', 'mysection03A', DeactivateField);
      ToggleFields('off', 'section', 'mysection03B', DeactivateField);
      }

How about something like this?

var num = parseInt(selListVal.replace('myselection', ''));

if(num > 0){
    ToggleFields('on', 'section', 'mysection01A', DeactivateField);
    ToggleFields('on', 'section', 'mysection01B', DeactivateField);
}
if(num > 1){
    ToggleFields('on', 'section', 'mysection02A', DeactivateField);
    ToggleFields('on', 'section', 'mysection02B', DeactivateField);
}
if(num > 2){
    ToggleFields('on', 'section', 'mysection03A', DeactivateField);
    ToggleFields('on', 'section', 'mysection03B', DeactivateField);
}

or to illustrate the idea by user968951

var num = parseInt(selListVal.replace('myselection', ''));

for (var x=1; x<=num; x++){
    ToggleFields('on', 'section', 'mysection0' + x + 'A', DeactivateField);
    ToggleFields('on', 'section', 'mysection0' + x + 'B', DeactivateField);
}

You can use a switch statement and omit the break. By this the following statements of a case will also be executed.

switch(selListVal) {
    case "myselection03":
       ToggleFields('on', 'section', 'mysection03A', DeactivateField);
       ToggleFields('on', 'section', 'mysection03B', DeactivateField);
    case "myselection02":
        ToggleFields('on', 'section', 'mysection02A', DeactivateField);
        ToggleFields('on', 'section', 'mysection02B', DeactivateField);
    default:
        ToggleFields('on', 'section', 'mysection01A', DeactivateField);
        ToggleFields('on', 'section', 'mysection01B', DeactivateField);
}

You could split the string an get the number. Then you could use a for loop to toggle all fields.

My recommendation would be to take advantage of the jQuery selectors by assigning classes to the specific groups you wish to activate/deactivate. You can assign multiple classes to a single item which would allow you to define which fields should be visible in any combination you wish. For example:

<input type="textbox" class="selection myselection02 myselection03" />
<input type="textbox" class="selection myselection01 myselection03" />
<input type="textbox" class="selection myselection01 myselection02" />

Then you can simply use the lines:

$(".selection").hide()
$("." + selListVal).show();

To only show the fields you desire.

I started off by writing an answer similar to @Alex, using switch .. case, and omitting the break; statements.

However while this is pretty neat and does shorten your code, it does have the disadvantage that it can become very difficult to maintain -- if you find you need to add something that should only apply to, say option 2, then you end up having to pretty much re-write the whole thing. Therefore, unless you know this is the way it will stay, I would advise against this, even though it's neat.

A better solution would be to adjust your section and selection IDs/values such that the value of the selection incorporates the IDs of the sections that will be toggled. That way you don't have to do any conditional code at all; just parse the selection value and toggle the sections that it tells you to.