使用javascript将值从dropdownlist(绑定到数据库）传递到textbox

To pass value from dropdownlist(binded to a database) to textbox using javascript

本文关键字：数据库 textbox 绑定 javascript dropdownlist 使用      更新时间：2023-09-26

我有一个数据库表，如下所示：

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

其绑定到如下数据库：

  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"));
}

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

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

您只需要text属性，如下所示：-

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

编辑：
好吧，你没有提到它被包装在母版页内，请确保你在内容页而不是母版页中有这些脚本。

相关文章：