带有 UpdatePanel 的 DropDownList 不会更改 html“选定”属性

Question

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

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

这是我的代码：

<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>

总而言之，当我在 DDL 中选择一个选项时，如果我使用 UpdatePanel，则“selected”属性不会应用于任何选项（第一个默认选项除外），因此我的代码将无法工作。我是否误解了 UpdatePanel 的工作原理？

以下是我的页面源代码部分，您可以在其中看到尽管我选择了“/”，但它并没有被“选中”。

    <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。

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

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

回答您问题的另一部分：您无需让服务器更改在DropDownList 或HTML select 中具有selected 属性的列表项。您可以在javascript 中执行此操作。

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

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

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

我希望这会有所帮助。