Question

我正在使用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属性时如何进行所需的任务？

提前致谢。

Answer 1

DataValueField将填充html <option />标签值属性，而DataTextField将填充文本属性。

当不指定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');
}

然后，您可以根据需要对结果执行任何操作，例如将它们放入文本框中。

Answer 2

感谢您的回复。我找到了答案。

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

如何在javascript中获取DropDownList的DataTextField？

2 个答案: