c# - 如何在JavaScript中获取DropDownList的DataTextField？

我正在使用DropDownList作为

<asp:DropDownList
  ID="ddlLocationName"
  runat="server"
  DataValueField="Guid"
  DataTextField="LocationName"
  AppendDataBoundItems="false"
  AutoPostBack="false"
  onchange="LocationChange()"
></asp:DropDownList>

当我从下拉列表中选择项目时，DataTextField应该显示在文本字段中。为此，我正在使用以下javascript：

function LocationChange()
{
  document.getElementById ("ctl00_mainContent_ctl02_txtEventLocation").value = document.getElementById ('ctl00_mainContent_ctl02_ddlLocationName')[document.getElementById ('ctl00_mainContent_ctl02_ddlLocationName').selectedIndex].value
}

当不使用下拉菜单的DataValueField时，它可以正常工作。但是，当还使用下拉菜单的DataValueField属性时，如何执行所需的任务？

提前致谢。

最佳答案

DataValueField将填充html <option />标记的value属性，而DataTextField将填充text属性。

如果您不指定DataValueField，则将DataTextField用于这两者（反之亦然，IIRC）。

因此，在JavaScript中，您需要具有以下内容（注意-我正在使用MS AJAX速记方式，其中$ get === document.getElementById）：

function LocationChange(){
  var ddl = $get('dropDownListId');
  var selectedOption = ddl.options[ddl.selectedIndex];
  var selectedText = selectedOption.text;
  var selectedValue = selectedOption.value;

  alert('Your option has a text property of ' + selectedText + ' and a value property of ' + selectedValue');
}

然后，您可以对结果进行任何操作，例如将其放入文本框。