2012-09-12 3 views
0

드롭 다운 목록에서 어떤 선택을했는지에 따라 실행해야하는 두 가지 기능이 있습니다.jquery에서 여러 이벤트 처리

예 :

Dropdownlist1 값이 "우선"다음 Dropdownlist2을 비활성화하고 Dropdownlist1 값은 다음 Dropdownlist2 사용하고 "세번째"가 Dropdownlist2 값으로 선택되는 경우 Function2
실행 "세컨드"이면 Function1
실행. Document ready 이벤트에서 if 문을 정기적으로 시도했지만 위의 내용을 달성 할 수 없습니다.

양식 :

    <th> 
        Dropdown List 1 
       </th> 
       <td> 
        <%= Html.Telerik().DropDownList().Name("DropDownList1") 
        .HtmlAttributes(new { @id = "DropDownList1" }) 
        .Items(items => { 
         items.Add().Text("").Value(""); 
         items.Add().Text("New").Value("First"); 
         items.Add().Text("Existing").Value("Second"); 
          })%> 
       </td> 

       <th> 
        Dropdown List 2 
       </th> 
       <td> 
        <%= Html.Telerik().DropDownList().Name("DropDownList2") 
        .HtmlAttributes(new { @id = "DropDownList2" }) 
        .Items(items => { 
         items.Add().Text("").Value(""); 
         items.Add().Text("Three").Value("Three"); 
          })%> 
       </td> 

JQuery와 :

$(function() { 
$("#Dropdownlist1").focusout(func1); 
}); 

function func1() { 

$("#Dropdownlist1").focusout(function(){ 
    if($("#Dropdownlist1").val() == "First"){ 
     $("#Dropdownlist2").attr('disabled','disabled') 
     Function1() 
    } 
    else if ($("#Dropdownlist1").val() == "Second"){ 
     $("#Dropdownlist2").attr('disabled','') 
     $("#Dropdownlist2").focusout(function(){Function2()}) 
    } 
}); 

} 
+2

시도한 HTML/Javascript/jQuery 코드를 게시 할 수 있다면 도움이됩니다. – Chase

+0

@Chase 위에 질문을 업데이트했습니다 – user793468

+0

아래에 답변을 추가했으나 질문에 완전히 대답하지 않으면 알려주고 해결할 수있는 방법으로 도움을줍니다. Thanks – Chase

답변

1

HTML :

<select id="options"> 
    <option value=1>option 1</option> 
    <option value=2>option 2</option> 
    <option value=3>option 3</option> 
</select> 

JS :

012 여기

는 내가 지금까지 무엇을 가지고
function func1() { alert('hello from func 1'); }; 
function func2() { alert('hello from func 2'); }; 
function func3() { alert('hello from func 3'); }; 

$('#options').change(function() { 

    if ($(this).val() == 1) { 
     func1(); 
    } else if ($(this).val() == 2) { 
     func2();  
    } else if ($(this).val() == 3) { 
     func3(); 
    } 
});​ 
+0

두 번째 dropdownlist2가 있으며 function2는 dropdownlist2 값으로 "Three"가 선택된 경우에만 호출됩니다. – user793468

0

내가 위의 글을 올바르게 읽으면, 이것은 당신이 요구 한 것을해야합니다 ... 아니면 적어도 올바른 방향으로 당신을 가리켜 야합니다.

$("#Dropdownlist1").change(function(){ 
    //if Dropdownlist1 value is "First" then Disable Dropdownlist2 and Execute Function1 
    if($(this).val() == "First"){ 
    $("#Dropdownlist2").attr("disabled", "disabled"); 
    function1(); 
    } 
    //if Dropdownlist1 value is "Second" then Enable Dropdownlist2 and Execute Function2 
    else if($(this).val() == "Second"){ 
    $("#Dropdownlist2").removeAttr("disabled"); 
    function2(); 
    } 
}); 

$("#Dropdownlist2").change(function(){ 
    //and Execute Function2 if "Third" is selected as Dropdownlist2 value 
    if($(this).val() == "Third") 
    function2(); 
});