2012-09-12 67 views
0

我有兩個函數需要執行,具體取決於在下拉列表中進行了哪些選擇。處理jquery中的多個事件

例如,如果

Dropdownlist1值是「第一」,則禁用Dropdownlist2和執行Function1
如果Dropdownlist1值是「第二」,那麼啓用Dropdownlist2並且如果「第三」被選擇爲Dropdownlist2值執行Function2
。我在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

我在下面添加了一個答案,但如果它沒有完全回答問題,請告訴我,我會盡我所能修復它/幫助。謝謝 – 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:

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,只有在爲dropdownlist2值選擇了「Three」時纔會調用function2 – 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(); 
});