Question

我有两个需要执行的功能，具体取决于下拉列表中的选择。

例如

如果Dropdownlist1值为“First”，则禁用Dropdownlist2并执行Function1
如果Dropdownlist1值为“秒”，则启用Dropdownlist2并执行Function2
如果选择“第三”作为Dropdownlist2值。我在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()})
    }
});   

}

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

Answer 2

如果我正确阅读了上述帖子，这应该按照您的要求行事......或者至少指出正确的方向。

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

在jquery中处理多个事件

2 个答案: