Question

I have shown below part of HTML code . Clearly there are two kind of options –

ICMP Error messages (8 options) and ICMP Informational Messages (around 30 options).

Total 48 options are there and for each selection, it will show its corrresponding paket structure.

First,have a look at HTML.

   <tr class="icmperr"><td>
     <select name="icmpmsgerrtyp"  id="icmpmsgerrtyp">
          <option value="res" onclick="icmptyp();">0-Reserved</option>
          <option value="desun" onclick="icmptyp();">1-Destination Unreachable</option>
          <option value="ptb" onclick="icmptyp();">2-Packet Too Big</option>
          <option value="timeex" onclick="icmptyp();">3-Time Exceeded</option>
          <option value="paraprob" onclick="icmptyp();">4-Parameter Problem</option>
        <option value="privex" onclick="icmptyp();">100-Private Experimentation</option>
       <option value="privex1" onclick="icmptyp();">101-Private Experimentation</option>
       <option value="resexp" onclick="icmptyp();">127-Reserved For expansion Of ICMPv6 Error Messages </option>
       </select> <br\>

  </td></tr>


   <tr class="icmpinfo"><td>
     <select name="icmpinfotyp"  id="icmpinfotyp">
     <option value="echoreq" onclick="icmptyp();">128-Echo Request</option>
     <option value="echorep" onclick="icmptyp();">129-Echo Reply</option>
     <option value="mlq" onclick="icmptyp();">130-Multicast Listener Query</option>
     <option value="mlr" onclick="icmptyp();">131-Multicast Listener Report</option>
     <option value="mld" onclick="icmptyp();">132-Multicast Listener Done</option>
     <option value="rs" onclick="icmptyp();">133-Router Solicitation(NDP)</option>
     <option value="ra" onclick="icmptyp();">134-Router Advertisement(NDP)</option>
     <option value="ns" onclick="icmptyp();">135-Neighbour Solicitation(NDP)</option>
     <option value="na" onclick="icmptyp();">136-Neighbour Advertisement(NDP)</option>
     <option value="redmsg" onclick="icmptyp();">137-Redirect Message(NDP)</option>
     <option value="rr" onclick="icmptyp();">138-Router Renumbering</option>
     <option value="niq" onclick="icmptyp();">139-ICMP Node Information Query</option>
     <option value="nir" onclick="icmptyp();">140-ICMP Node Information    
     Response</option>
     <option value="indsm" onclick="icmptyp();">141-Inverse Neighbor Discovery 
     Solicitation Message</option>
     <option value="indam" onclick="icmptyp();">142-Inverse Neighbor Discovery 
     Advertisement Message</option>
     <option value="mldr" onclick="icmptyp();">143-Multicast Listener Discovery (MLDv2) 
     Reports</option>
     <option value="hadreqm" onclick="icmptyp();">144-Home Agent Address Discovery 
     Request Message</option>
     <option value="hadresm" onclick="icmptyp();">145-Home Agent Address Discovery 
     Reply Message</option>
     <option value="mps" onclick="icmptyp();">146-Mobile Prefix Solicitation</option>
     <option value="mpa" onclick="icmptyp();">147-Mobile Prefix Advertisement</option>
     <option value="cps" onclick="icmptyp();">148-Certification Path Solicitation (SEND)
     </option>
     <option value="cpa" onclick="icmptyp();">149-Certification Path Advertisement 
     (SEND)</option>
     <option value="mra" onclick="icmptyp();">151-Multicast Router Advertisement 
     (MRD)</option>
     <option value="mrs" onclick="icmptyp();">152-Multicast Router Solicitation 
     (MRD)</option>
     <option value="mrt" onclick="icmptyp();">153-Multicast Router Termination 
     (MRD)</option>
     <option value="rcm" onclick="icmptyp();">155-RPL Control Message</option>
     <option value="pex" onclick="icmptyp();">200-Private Experimentation</option>
     <option value="pex1" onclick="icmptyp();">201-Private Experimentation</option>
     <option value="resexpim" onclick="icmptyp();">255-Reserved for expansion of ICMPv6 
     informational messages</option>


     </select> <br\>
     </td></tr>

now suppose I want to specify options for ICMP Inofrmational message-ECHO Request.

so it will be like –

  <option value="echoreq" onclick="icmptyp();echoreq();">128-Echo   
  Request</option>

  and then a jquery function echoreq() will go like this -


   function echoreq() {

      $(".echoreq").css("visibility", "visible");
      $(".echoreq").css("display", "table-row");  

      and 47*2 lines to make others invisible

   }

and there will be around 48 such functions. So it will go very lenghty.

so is there any suggestion how can I save space, may be by using showing some sort
of smartness in using class/function names or using any regex somewhere but not
sure.

Please excuse If I am missing something trivial. Edit required in title also.
Thanks in advance.

EDIT:

I used it in this way. Now what’s wrong here ?

Sample HTML –

    <tr class="icmppac icmppacdesun">
       <td width="249">Unused</td>
       <td width="249"><input type="text" name="icmppacdesun" size="20"  
       id="icmppacdesun"/> [Default : 0] </td>
    </tr>

and function call like this –

  <option value="desun" onclick="icmptyp();icmppacstr('.icmppacdesun');">1-Destination 
  Unreachable</option>

and jquery like this –

    function icmppacstr(myobject) {

                     $(myobject).css("visibility", "visible");
                     $(myobject).css("display", "table-row");

                     $(".icmppac").css("visibility", "hidden");
                     $(".icmppac").css("display", "none");

    }

EDIT2:

  ....... 
  <select name="icmpmsgerrtyp"  id="icmpmsgerrtyp" onchange="myfun2(this.value)">
  ..... 
  <select name="icmpinfotyp"  id="icmpinfotyp" onchange="myfun2(this.value)">
  ....

and myfun2 was like this…

 function myfun2(object)
 {
  if(object=="desun")
  {

   // working fine 
   icmppacstr('.icmppacdesun');
  }
 //and so on for first select

  if(object=="echoreq")
  {
   alert('hi'); // its getting printed
   icmppacstr('.icmppacechoreq'); // but its not executing
  }
 //and so on for second select     


}

Its working out fine for options corresponding to first select but nothing is happening for when I select any one from second select options.

Answer 1

Why do you want to create separate functions?
You can simply create one function and pass the parameters to it.
Eg:

    function myfun(myobject) {

          $(myobject).css("visibility", "visible");
          $(myobject).css("display", "table-row");
       }

Rather than calling onclick of option after checking your edit i’ll suggest use onchange of select.
So it will look like this.

<select name="icmpinfotyp"  id="icmpinfotyp" onchange="myfun2(this.value)">

and function will be like this

function myfun2(object)
{
  if(object=="desun")
  {
    icmptyp();
    icmppacstr('.icmppacdesun');
    // in my case myfun('.icmppacdesun');
  }
  //and so on
}