带有 UpdatePanel 的 DropDownList 未更改 html "selected" 属性

Question

当我遇到这个问题时，我正在使用 WebMethods。

我想使用 WebMethod 和 javascript 创建一个简单的计算器，但它只有在 DDL 的选项在浏览器的源代码中具有 "selected" 属性时才有效。如果我删除 UpdatePanel 这工作正常；页面被刷新，html 源代码将显示我在 DDL 中选择的任何内容的 "selected" 属性。对于 UpdatePanel，只有第一个选项是 selected（默认情况下）。问题是我不想刷新整个页面。

这是我的代码：

<input id="TextA" type="text" />
  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <triggers>
      <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
    </triggers>
    <ContentTemplate>
      <asp:DropDownList ID="DropDownList1" runat="server" 
        onselectedindexchanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True">
        <asp:ListItem Value="+">+</asp:ListItem>
        <asp:ListItem Value="-">-</asp:ListItem>
        <asp:ListItem Value="/">/</asp:ListItem>
        <asp:ListItem Value="*">*</asp:ListItem>
      </asp:DropDownList>
    </ContentTemplate>
  </asp:UpdatePanel>
  <input id="TextB" type="text" />

网络方法：

[WebMethod]
public string Add(double a, double b) 
{
  double Calc = a + b;
  //string StringCalc = Calc.ToString();
  string Complete = "The answer is " + Calc;
  return Complete;
}
[WebMethod]
public string Subtract(double a, double b)
{
  double Calc = a - b;
  string Complete = "The answer is " + Calc;
  return Complete;
}
[WebMethod]
public string Divide(double a, double b)
{
  double Calc = a / b;
  string Complete = "The answer is " + Calc;
  return Complete;
}
[WebMethod]
public string Multiply(double a, double b)
{
  double Calc = a * b;
  string Complete = "The answer is " + Calc;
  return Complete;
}

JS：

<script type="text/javascript">
    function Add() {
      var v1 = $get('TextA').value;
      var v2 = $get('TextB').value;
      CalculatorWebService.Add(v1, v2, ResultCallBack);
    }
    function Subtract() {
      var v1 = $get('TextA').value;
      var v2 = $get('TextB').value;
      CalculatorWebService.Subtract(v1, v2, ResultCallBack);
    }
    function Divide() {
      var v1 = $get('TextA').value;
      var v2 = $get('TextB').value;
      CalculatorWebService.Divide(v1, v2, ResultCallBack);
    }
    function Multiply() {
      var v1 = $get('TextA').value;
      var v2 = $get('TextB').value;
      CalculatorWebService.Multiply(v1, v2, ResultCallBack);
    }

    var DropDownSelection = document.getElementById('DropDownList1');

    switch (DropDownSelection.options[DropDownSelection.selectedIndex].value) {
      case "+":
        $addHandler($get('ButtonA'), 'click', Add);
        break;
      case "-":
        $addHandler($get('ButtonA'), 'click', Subtract);
        break;
      case "/":
        $addHandler($get('ButtonA'), 'click', Divide);
        break;
      case "*":
        $addHandler($get('ButtonA'), 'click', Multiply);
        break;
    }
    function ResultCallBack(result) {
      $get('TextA').value = result;
    }
</script>

总结一下，当我 select DDL 中的一个选项时，如果我使用 UpdatePanel，"selected" 属性不会应用于任何选项（第一个默认选项除外），等等我的代码不起作用。我是否误解了 UpdatePanel 的工作原理？

下面是我的页面源代码部分，您可以在其中看到尽管我 select 使用“/”，但它不是 "selected"。

    <div id="UpdatePanel1">
    <select name="DropDownList1" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;DropDownList1\&#39;,\&#39;\&#39;)&#39;, 0)" id="DropDownList1">
      <option selected="selected" value="+">+</option>
      <option value="-">-</option>
      <option value="/">/</option>
      <option value="*">*</option>
    </select>
    </div>

Answer 1

我看不出你甚至需要 UpdatePanel。

更新面板的目的是允许您 post 将信息返回服务器并从服务器端更改屏幕外观，而无需刷新整个页面。

但是如果您的所有服务器功能都是通过 Web Methods 实现的，您根本不需要 post 返回。您可以对来自 Web Methods 的响应做出反应并根据需要更改屏幕，整个过程为 javascript.

回答你问题的另一部分：你不需要让服务器来更改 DropDownList 或 HTML 中哪个列表项具有 selected 属性 select。您可以在 javascript.

中执行此操作

但是，如果您的用户正在选择 DropDownList 或 select 中的项目，您甚至不需要这样做：选择项目的行为会导致 selected 属性与列表项相关联。

不过，如果您使用浏览器的“查看源代码”功能，您将看不到它，因为它只显示从服务器下载的代码。它不反映标记可能已更改的方式。

如果要确定列表项是否具有selected属性，需要使用浏览器的页面检测和调试工具，IE中的F12或Ctrl-Shift-I 在 Chrome 中。

希望对您有所帮助。

带有 UpdatePanel 的 DropDownList 未更改 html "selected" 属性

DropDownList with UpdatePanel not changing the html "selected" attribute

javascript

asp.net

updatepanel

asmx

drop-down-menu