Проблема с функцией JS Selectbox

Question

У меня есть selectbox с тремя вариантами. Когда пользователь выбирает один из трех вариантов, я хочу, чтобы под ним отображался определенный div. Я пытаюсь написать код, который определяет, какое конкретное поле должно отображаться при выборе каждого из трех вариантов. До сих пор я работал только над кодом, который относится к первому варианту. Однако всякий раз, когда пользователь выбирает любую из трех опций в окне выбора, запускается функция для первой опции и отображается div.

Мой вопрос состоит из двух частей: 1) Как написать условную функцию, специально предназначенную для выбранной опции

2) Как лучше всего выполнить то, что я описал выше; Как мне эффективно определить три разные функции для трех разных опций в поле выбора?

Вот функция, над которой я работал для первого варианта:

$(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

Вы можете использовать selectmenu.value (или $(selectmenu).val()), чтобы получить значение выбранного параметра, и вы можете сопоставить функции со значениями, используя объект. Пример:

$(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]();
  });
});

Конечно, вам не нужно определять встроенные функции. Я просто сделал это для краткости здесь. Вы можете определить их где угодно и ссылаться на них по имени.

Answer 2

Похоже, что значения параметров выбора совпадают с идентификаторами для элементов div. Вы можете использовать это, чтобы определить функцию, которая в основном показывает div, который имеет тот же идентификатор, что и значение выбранной опции. Также измените класс в каждом div на subtableDiv.

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

Answer 3

Я думаю, что вы можете получить это, используя позицию элемента в списке и таблице, если эти относительные позиции одинаковы. Измените класс на DIV, чтобы они все были 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();
    });
});