如何在JavaScript中获取DropDownList的DataTextField？

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速记其中$得到===的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 
}