使用 JQuery 将选择属性添加到 Html.DropDownList

Posted 2023-05-08

【中文标题】使用 JQuery 将选择属性添加到 Html.DropDownList

【英文标题】：Add select attribute to Html.DropDownList using JQuery

【发布时间】：2010-09-23 18:14:10

【问题描述】：

我有以下 html 元素：

<tr>  
  <td> <label for="casenumber">Case:</label></td>
  <td>
    <%=Html.TextBox("casenumber", "", new Dictionary<string, object>
    
      "id", "casenumberID"
    )%>
  </td>
</tr>
<tr>
  <td><label for="fogbugzUser">Users:</label></td>
  <td>
    <%=Html.DropDownList("UserList", (SelectList)ViewData["UserList"], new Dictionary<string, object>
    
      "id", "userlistid"
    )%>
  </td>
</tr>

现在，当casenumber 失去焦点时，我想调用数据库返回UserList 中的选定值。

这里是 javascript：

$(function() 
  $("#casenumberID").blur(function() 
    //don't know how to do!!);
  );    
);

这是客户端脚本：

public JsonResult GetOpenByUser(string casenumber)

  return Json(userContext.OpenBy(casenumber));

问题是如何编写函数“模糊”，以便我可以将文本框casenumber 的值传递给GetOpenByUser？

另外，如何完成函数blur，使得与GetOpenByUser返回的选项值相同的选项被选中？

【参考方案1】：

我在 jquery 中使用this 作为选择框

【参考方案2】：

您预期的（独立于 ASP.NET MVC 的）方法是正确的：

onblur：向数据库发出 Ajax 请求 关于 Ajax 成功：读取并解析响应 在#fogbugzUser中选择合适的值

示例代码，假设您的页面返回带有 ID 的纯字符串，没有其他内容。这里我使用get() 发出请求，但还有更多方法可以做到。

$(function() 
  $("#casenumberID").blur(function() 
    $.get(
      "url/to/some.page/fetching.the.userid",
      // this will be turned into URL parameters, e.g.: "casenumberID=15"
       casenumberID: this.value ,
      function(result) 
        /* check if result is a string of numbers only (change for 
         * something that better suits your needs if numbers is not
         * what you expect here */
        if (/^\d+$/.test(result))
          $("#fogbugzUser").val(result);
        else
          alert("Server returned an unexpected result: " + result);
      
    );    
  );
);

您也可以在服务器响应中返回 JSON。在这种情况下，getJSON() 将是您的朋友。

【参考方案3】：

这里是代码，供需要的人使用，测试使用 ASP.NET MVC beta 1：

服务器端 AJAX：

    public JsonResult GetOpenByUser(string casenumber)
    

        return Json(userContext.OpenBy(casenumber));
    

HTML：

  <form id="subForm">
    <tr>  
    <td> <label for="casenumber">Case:</label></td>
     <td><%=Html.TextBox("casenumber", "")%> </td>
    </tr>
    <tr>
    <td><label for="fogbugzUser">Users:</label></td>
    <td><%=Html.DropDownList("UserList", (SelectList)ViewData["UserList"])%></td>
    </tr>
</form>

脚本：

$(function() 
    $("#casenumber").blur(function() 
        $.getJSON("Home/GetOpenByUser",
     casenumber: this.value ,
    function(result) 
        if (result == "")
            return;

        $("#subForm select[@name='UserList'] option[@selected='selected']").removeAttr("selected"); //remove any selected items
        $("#subForm select[@name='UserList'] option[@value='" + result + "']").attr("selected", "selected"); //select the item that is returned from the server

    );
    );

);

【讨论】：

$("#subForm select[@name='UserList']").val(result) 怎么样？

那会很好，但这更简洁： $(function() $("#casenumber").blur(function() $("#UserList").val(this .value) ); );

【参考方案4】：

或者，对于 JQuery 脚本部分，可以编写

$(function() 
    $("#casenumber").blur(function() 
        $.getJSON("Home/GetOpenByUser",
     casenumber: this.value ,
    function(result) 
        if (result == "")
            return;

 $("#UserList").val(this.value)

    );
    );

);