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

时间:2015-03-22 05:29:05

标签: javascript asp.net dropdownbox

我有一个数据库表如下:

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

现在我想将下拉列表中的选定文本传递给buttonclick上的文本框。我使用下面的代码传递了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" />

如何将下拉列表中相同选定选项的文本传递给buttonclick上的文本框。我们知道有一个&#39;文本&#39;属性会起作用,但我不知道如何去做。

更新 - 已添加源代码:

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

1 个答案:

答案 0 :(得分:1)

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

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

修改
好的,你没有提到它包含在母版页中,请确保你在内容页面而不是母版页中有这些脚本。