Decision structure, how to know which to use?

Question

On good logic practice:

I have a Dropdownlist with 8 values and depending on what is selected will add/remove components from a page html, where it is manipulated via jQuery

Now my question is, what would be the best way(if there is one) to separate the values of this listing ? I thought of 3 ways:

Switch Case

String.Compare

If Else IF

Example

  $("#<%=ddlListagens.ClientID%>").change(function () {
                    var vlr = $("#<%=ddlListagens.ClientID%>").val();
                    if (vlr == "RC") {
                        $("#ciclo").show(500);
                        $("#Situacao").hide(500);
                        $("#empresa").hide(500);
                        $("#meses").hide(500);
                        $("#<%=ddlDataDe.ClientID%>").hide(500);
                        $("#<%=txtDataIni.ClientID%>").hide(500);
                        $("#<%=txtDataFim.ClientID%>").hide(500);
                        $("#<%=txtGrupoFat.ClientID%>").hide(500);
                        $("#<%=txtCodCli.ClientID%>").hide(500);
                        $("#<%=txtDSini.ClientID%>").hide(500);
                        $("#<%=txtDSfim.ClientID%>").hide(500);
                        $("#<%=Label5.ClientID%>").hide(500);
                        $("#<%=ddlEmpFim.ClientID%>").hide(500);
                        $("#<%=ddlEmpIni.ClientID%>").hide(500);
                        $("#<%=ddlTipoReg.ClientID%>").hide(500);
                        $("#<%=ddlMeses.ClientID%>").hide(500);
                        $("#<%=ddlDS.ClientID%>").hide(500);
                        $("#<%=ddlOrdenacao.ClientID%>").hide(500);
                        $("#<%=Label22.ClientID%>").hide(500);
                        $("#<%=Label1.ClientID%>").hide(500);
                        $("#<%=Label19.ClientID%>").hide(500);
                        $("#<%=Label12.ClientID%>").hide(500);
                        $("#<%=Label2.ClientID%>").hide(500);
                        $("#<%=btnImpListagem.ClientID%>").hide(500);
                        $("#<%=btnImpListaXLS.ClientID%>").show(500);

                    }

Answer 1

Igor, how the decision will revolve around one element only dropdown, for this situation, the most appropriate would be to use the switch. An example:

$('#selecao').change(function(){
    switch($('#selecao option:selected').val()){
        case 'op1' : alert('Opção 1 escolhida!')
        break;
        case 'op2' : alert('Opção 2 escolhida!')
        break;
        case 'op3' : alert('Opção 3 escolhida!')
        break;
        case 'op4' : alert('Opção 4 escolhida!')
        break;
        case 'op5' : alert('Opção 5 escolhida!')
        break;
        default: alert('nenhuma opção selecionada!')
   }
});

<select id="selecao">
  <option > Selecione uma opção </option>
  <option value="op1"> Opção 1 </option>
  <option value="op2"> Opção 2 </option>
  <option value="op3"> Opção 3 </option>
  <option value="op4"> Opção 4 </option>
  <option value="op5"> Opção 5 </option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

In this example, I capture the value of option selected and do the actions I need.