JS 선택 상자 기능 문제

Question

세 개의 옵션이있는 선택 상자가 있습니다. 사용자가 세 가지 옵션 중 하나를 선택하면 그 아래에 특정 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의 클래스를 모두 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 3

select 옵션 값이 div의 ID와 같습니다. 이를 사용하여 기본적으로 선택된 옵션의 값과 동일한 ID를 가진 div를 표시하는 함수를 정의 할 수 있습니다. 또한 각 div의 클래스를 subtableDiv으로 변경하십시오.

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