Problem with JS Selectbox Function

Question

I have a selectbox with three options. When a user selects one of the three options, I want a specific div to appear below it. I am trying to write the code that dictates which specific box is to appear when each of the three options is selected. So far, I have only worked on the code that pertains to the first option. However, whenever the user selects any of the three options from the selectbox, the function for the first option is triggered and the div is displayed.

My question is two part: 1) How do I write a conditional function that specifically targets the selected option

2) What is the best way to accomplish what I have described above; How do I efficiently go about defining three different functions for three different options in a select box?

Here is the function I was working on for the first option:

$(document).ready(function(){
var subTableDiv = $("div.subTableDiv");
var subTableDiv1 = $("div.subTableDiv1");
var subTableDiv2 = $("div.subTableDiv2");
subTableDiv.hide();
subTableDiv1.hide();
subTableDiv2.hide();

var selectmenu=document.getElementById("customfields-s-18-s");
selectmenu.onchange=function(){ //run some code when "onchange" event fires
 var chosenoption=this.options[this.selectedIndex].value //this refers to "selectmenu"
 if (chosenoption.value ="Co-Op"){
     subTableDiv1.slideDown("medium");
     }
 }
});

Html:

<tr>
<div>
<select name="customfields-s-18-s" class="dropdown" id="customfields-s-18-s" >
<option value="Condominium"> Condominium</option>
<option value="Co-Op"> Co-Op</option>
<option value="Condop"> Condop</option>
</select>
</div>
</tr>
<tr class="subTable">
<td colspan="2">
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Condominium" class="subTableDiv">Hi There! This is the first Box</div>
</td>
</tr>
<tr class="subTable">
<td colspan="2">
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Co-Op" class="subTableDiv1">Hi There! This is the Second Box</div>
</td>
</tr>
<tr class="subTable">
<td colspan="2">
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Condop" class="subTableDiv2">Hi There! This is the Third Box.</div>
</td>
</tr>

Answer 1

I think you can get this using the position of the item in the list and the table, as long as those relative positions are the same. Change the class on the DIVs so they are all subTableDiv .

$(function() {
    $('#customfields-s-18-s').change( function() {
         var selected = $(this).find('option:selected');
         var position = $(this).find('option').index(selected);
         // hide all then show the nth one
         $('.subTableDiv').hide().eq(position).show();
    });
});

Answer 2

You can use selectmenu.value (or $(selectmenu).val() ) to get the value of the selected option, and you can match the functions to the values using an object. Example:

$(function() {
  var call_table = {
    'Condominium': function() {alert('One!');},
    'Co-Op': function() {alert('Two!');},
    'Condop': function() {alert('Three!');}
  };

  $('#customfields-s-18-s').change(function() {
    call_table[this.value]();
  });
});

Of course, you don't have to define the functions inline. I just did it for concision here. You could define them anywhere and reference them by name instead.

Answer 3

It looks like the select option values are the same as the IDs for the divs. You could use that to define a function that basically shows the div that has the same id as the value of the selected option. Also change the class on each div to subtableDiv .

$("#customfields-s-18-s").change(function() {
    // hide all divs
    $('.subtableDiv').hide();
    // show matching div
    var value = $(this).val();
    $('#' + value).show();
}