2012-09-12 65 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(); 
});