javascript - 使用 javascript 将值从下拉列表(绑定(bind)到数据库)传递到文本框

Question

我有一个数据库表如下:

  Create table tblState
  (
   StateId int primary Key,
   StateName nvarchar(50)
  )

它绑定(bind)到数据库如下:

  protected void BindStateDropDown()
{
    string CS = ConfigurationManager.ConnectionStrings["SportsActiveConnectionString"].ConnectionString;
    using (SqlConnection con = new SqlConnection(CS))
    {
        con.Open();
        SqlCommand cmd = new SqlCommand("select * from tblState", con);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);
        ddlState.DataSource = ds;
        ddlState.DataTextField = "StateName";
        ddlState.DataValueField = "StateId";
        ddlState.DataBind();
    }
    ddlState.Items.Insert(0, new ListItem("---Select---", "0"));
}

现在我想将选定的文本从下拉列表传递到按钮单击上的文本框。我使用了下面的代码来传递值。

 <script type="text/javascript">
 function calculateState() {

  var state = document.getElementById('<%= ddlState.ClientID%>');
  var txtState0 = document.getElementById('<%= txtState.ClientID%>');
  txtState0.value = state.options[state.selectedIndex].value;
  }
  </script>
  <asp:TextBox ID="txtState" runat="server" Width="260px"></asp:TextBox>
  <asp:DropDownList ID="ddlState" DataTextField="StateName" DataValueField="StateId" runat="server">
  </asp:DropDownList>
  <input id="btnState" onclick="calculateState();" type="button" value="Calculate State" />

如何将下拉列表中相同选定选项的文本传递到按钮单击上的文本框。据了解，拥有“文本”属性将起作用，但我不知道如何处理它。

更新 - 添加源代码:

    <tr>
        <td class="auto-style21">
            <span id="ContentPlaceHolder1_Label11" class="auto-style31">State:</span>
        </td>
        <td>
            <input name="ctl00$ContentPlaceHolder1$txtState" type="text" id="ContentPlaceHolder1_txtState" style="width:260px;" />
        &nbsp;&nbsp;
            <select name="ctl00$ContentPlaceHolder1$ddlState" id="ContentPlaceHolder1_ddlState">
<option value="0">---Select---</option>
<option value="1">Andaman and Nicobar Islands</option>
<option value="2">Andhra Pradesh</option>
<option value="3">Arunachal Pradesh</option>
<option value="4">Assam</option>
<option value="5">Bihar</option>
<option value="6">Chandigarh</option>
<option value="7">Chhattisgarh</option>
<option value="8">Dadra and Nagar Haveli</option>
<option value="9">Daman and Diu</option>
<option value="10">Delhi</option>
<option value="11">Goa</option>
<option value="12">Gujarat</option>
<option value="13">Haryana</option>
<option value="14">Himachal Pradesh</option>
<option value="15">Jammu and Kashmir</option>
<option value="16">Jharkhand</option>
<option value="17">Karnataka</option>
<option value="18">Kerala</option>
<option value="19">Lakshadweep</option>
<option value="20">Madhya Pradesh</option>
<option value="21">Maharashtra</option>
<option value="22">Manipur</option>
<option value="23">Meghalaya</option>
<option value="24">Mizoram</option>
<option value="25">Nagaland</option>
<option value="26">Orissa</option>
<option value="27">Pondicherry</option>
<option value="28">Punjab</option>
<option value="29">Rajasthan</option>
<option value="30">Sikkim</option>
<option value="31">Tamil Nadu</option>
<option value="32">Tripura</option>
<option value="33">Uttar Pradesh</option>
<option value="34">Uttarakhand</option>
<option value="35">West Bengal</option>

 </select>
        &nbsp;
 <input id="btnCity" onclick="calculateState();" type="button" value="Calculate State" /></td>
        <td></td>
    </tr>

Answer 1

您只需要像这样的 text 属性:-

function calculateCity() {
    var city = document.getElementById('<%= ddlCity.ClientID%>');
    var txtState0 = document.getElementById('<%= txtState.ClientID%>');
    txtState0.value = state.options[state.selectedIndex].text;
 }

编辑:
好吧，您没有提到它包含在母版页中，请确保这些脚本位于内容页而不是母版页中。