Javascript code for select input

Question

Hi friends i have this code for select input change, i need some good advice if this code is ok like that or is a way to optimize this code? thanks!

This code is used for changing info's between selected input options.

This code is for two select inputs "SECTIONS" and "AGE CATEGORY". If a user select a value from sections the age category will be changed regarding the value from Section option.

Example: If i select from sections value "Solo" the Age category values will be changed to values for "Solo" such as (4-6 Years, 7-9 Years,and so on) Script is used for a dancing contest registration form.

javascript:

$("select[name=sections]").on("change", function () {
   if ($(this).val() === 'Solo') {
      $('#mini,#copii,#juniori').hide();
          $('#baby,#solo7,#solo8,#solo9,#solo10,#solo11,#solo12,#solo13,#solo14,#solo15,#seniori').show();
          $("input[type='text'][name='numeformatie']").val('-');
          $("input[type='text'][name='numeformatie']").prop('disabled', true); 
          $("input[type='text'][name='nrdansatori']").val('1');
          $("input[type='text'][name='dansator1']").val('');
          $(".dansator1").show();
          $("input[type='text'][name='nrdansatori']").prop('disabled', true);} 
        else if ($(this).val() === 'Duo/Trio/Quartet') {
          $('#baby,#mini,#copii,#juniori,#seniori').show();
          $('#solo7,#solo8,#solo9,#solo10,#solo11,#solo12,#solo13,#solo14,#solo15').hide();
          $("input[type='text'][name='numeformatie']").val('-');
          $("input[type='text'][name='numeformatie']").prop('disabled', true);
          $("input[type='text'][name='nrdansatori']").val();
          $("input[type='text'][name='dansator1']").val('');
          $(".dansator1").show();
          $("input[type='text'][name='nrdansatori']").prop('disabled', false);}
        else if ($(this).val() === 'Grupuri') {
          $('#baby,#mini,#copii,#juniori,#seniori').show();
          $('#solo7,#solo8,#solo9,#solo10,#solo11,#solo12,#solo13,#solo14,#solo15').hide();
          $("input[type='text'][name='numeformatie']").val();
          $("input[type='text'][name='numeformatie']").prop('disabled', false);
          $("input[type='text'][name='dansator1']").val('-');
          $(".dansator1").hide();}
        else if ($(this).val() === 'Formatii') {
          $('#baby,#mini,#copii,#juniori,#seniori').show();
          $('#solo7,#solo8,#solo9,#solo10,#solo11,#solo12,#solo13,#solo14,#solo15').hide();
          $("input[type='text'][name='numeformatie']").val('');
          $("input[type='text'][name='numeformatie']").prop('disabled', false);
          $("input[type='text'][name='dansator1']").val('-');
          $("input[type='text'][name='nrdansatori']").prop('disabled', false);
          $(".dansator1").hide();}
    }).trigger('change');

Html:

<select name="sections" id="sections<?php echo $id;?>" class="form-control">
                <option class="noselect" selected value="<?php echo $sectiuni; ?>"><?php echo $sectiuni; ?></option>
                <option id="solo" value="Solo">Solo</option>
                <option id="duo" value="Duo/Trio/Quartet">Duo/Trio/Quartet</option>
                <option id="grupuri" value="Grupuri">Grupuri 5-12 dansatori</option>
                <option id="formatii" value="Formatii">Formaţii peste 13 dansatori</option>
              </select>
 <select id="agecategory<?php echo $id;?>" name="agecategory" class="form-control">
            <option class="noselect" selected value="<?php echo $catvarsta; ?>"><?php echo $catvarsta; ?></option>
            <option id="baby" value="4-6 ani - BABY">4-6 years</option>
            <option id="mini" value="7-9 ani - MINI">7-9 years</option>
            <option id="solo7" value="7 ani">7 years - SOLO</option>
            <option id="solo8" value="8 ani">8 years - SOLO</option>
            <option id="solo9" value="9 ani">9 years- SOLO</option>
            <option id="copii" value="10-12 ani - COPII">10-12 years</option>
            <option id="solo10" value="10 ani">10 years - SOLO</option>
            <option id="solo11" value="11 ani">11 years- SOLO</option>
            <option id="solo12" value="12 ani">12 years- SOLO</option>
            <option id="juniori" value="13-15 ani - JUNIORI">13-15 years</option>
            <option id="solo13" value="13 ani">13 years - SOLO</option>
            <option id="solo14" value="14 ani">14 years - SOLO</option>
            <option id="solo15" value="15 ani">15 years - SOLO</option>
            <option id="seniori" value="+ 16 ANI - SENIORI">+ 16 years</option>
          </select>

Answer 1

Use proper indentation for better readability.

Hide all values first. This way you only need to keep track of which values you want shown.

You can use parallel arrays or an object to better keep track of which values you want shown/hidden. For example:

const selectionOptions = {
  "Solo": { 
    "optionsToShow": '#baby,#solo7,#solo8,#solo9,#solo10,#solo11,#solo12,#solo13,#solo14,#solo15,#seniori'
  }
}

Here's a JSFiddle demonstration: https://jsfiddle.net/nxcpLaug/1/

You can do the same to list the values you want reset:

const selectionOptions = {
  "Solo": { 
    "optionsToShow": '#baby,#solo7,#solo8,#solo9,#solo10,#solo11,#solo12,#solo13,#solo14,#solo15,#seniori'
    "elementsToResetValue": "#numeformatie,#numeformatie"
  }
}

Answer 2

This can only be an incomplete review, as the HTML is still missing, but it should point you in the direction of things to do.

You have a lot of repetition in your code, here's how to do it with less repetition.

var $num= $("input[type='text'][name='numeformatie']");
var $nrd= $("input[type='text'][name='nrdansatori']");
var sol='#solo7,#solo8,#solo9,#solo10,#solo11,#solo12,#solo13,#solo14,#solo15',
    cases={
      Solo:          {numv:'-',numdis:'true',nrdv:'1',dv1:'',nrddis:true,
                      shw:'.dansador1,#baby,#seniori,'+sol, hid:'#mini,#copii,#juniori'},
      'Duo/Trio/Quartet': {numv:'-',numdis:'true',nrdv:'1',dv1:'',nrddis:true,
                      shw:'.dansador1,#baby,#mini,#copii,#juniori,#seniori', hid:sol},
      Grupuri:       {numv:'-',numdis:'true',nrdv:'1',dv1:'',nrddis:true,
                      shw:'#baby,#mini,#copii,#juniori,#seniori', hid:'.dansador1,'+sol},
      Formatii:      {numv:'-',numdis:'true',nrdv:'1',dv1:'',nrddis:true,
                      shw:'#baby,#mini,#copii,#juniori,#seniori', hid:'.dansador1,'+sol},
};
$("select[name=sectiuni]").on("change", function () {
   var c=cases[$(this).val()];
   $(c.hid).hide();
   $(c.shw).show();
   $num.val(c.numv).prop('disabled',c.numdis);
   $nrd.val(c.nrdv).prop('disabled',c.nrddis);
}).trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>