dropdown 相关问题

Bootstrap 5。这是我的代码，只是 UL，因为一旦页面加载，列表就会动态地来自数据库。 Bootstrap 5。这是我的代码，只是 UL，因为一旦页面加载，<li> 列表就会动态地来自数据库。 <div class="btn-group"> <button id="dropdownGerencia" class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> My list </button> <ul id="mtUl" class="dropdown-menu"> </ul> 现在，填充列表后，我希望下拉列表显示用户选择的值。我有这个代码。但问题是我的下拉菜单与其他下拉菜单嵌套在一起（所有下拉菜单上方都有一个 .btn-group。因此，当他们单击一个特定的 LI 时，所有下拉菜单都会获得值（因为 .btn-group 会获取值，而不是仅获取值） li 存在。 $(".dropdown-menu").on('click', ' li a', function () { var selText = $(this).text(); $(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' ' + '<span class="caret"></span>'); }); 我也尝试过这个，但这没有显示所选值，因为它是后来动态创建的。 $('#myUl li').on('click', function () { $('#mySpecificDropdown').html($(this).find('a').html()); }); 您可以将 prev() 应用于所选元素的上一个元素，并使用相同的方法更改按钮的文本或获取当前 dropdown-menu 的索引并使用它来选择所需的 dropdown-menu。演示代码： $(".dropdown-menu").on('click', ' li a', function() { var selText = $(this).text(); var index_ = $('.dropdown-menu').index($(this).closest('.dropdown-menu')); $(this).closest('.dropdown-menu').prev().html(selText + ' ' + '<span class="caret"></span>'); //or use below with index // $('.dropdown-toggle').eq(index_).html(selText + ' ' + '<span class="caret"></span>') }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <div class="btn-group"> <button id="dropdownGerencia" class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown link </button> <ul id="mtUl" class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else</a></li> </ul> <button id="dropdownGerencia1" class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown link </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another</a></li> <li><a class="dropdown-item" href="#">Something</a></li> </ul> </div>

jquery drop-down-menu dropdown bootstrap-5

回答 1 投票 0

取消选择 Html.Dropdown 中的项目不会将文本设置为“选择...”标题

我有一个下拉列表可以选择一个财政季度并填写我的日期控件 @Html.DropDownList("Quarters", null, null, htmlAttributes: new { @class = "selectpicker", id=&

javascript html razor dropdown deselect

回答 1 投票 0

在 gridview 中，每行都有 2 个下拉菜单。选择第一个下拉列表中的值后，它应该在第二个下拉列表中显示下拉值

下拉菜单依赖于另一个下拉菜单。这是我尝试过的 ASPX gridview 中的下拉菜单依赖于另一个下拉菜单。 here is what i tried aspx 选择程序 </asp:DropDownList> <asp:RequiredFieldValidator ID="rfvddlProgram" runat="server" ErrorMessage="*" ControlToValidate="ddlProgram" Font-Bold="False" Font-Names="Verdana" Font-Size="8pt" SetFocusOnError="True" ValidationGroup="v1" ForeColor="Red" InitialValue="0"></asp:RequiredFieldValidator> <%-- <a href="#" target="_blank">BA Economics</a>--%> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Location"> <ItemTemplate> <asp:DropDownList ID="ddl_Location" runat="server" class="form-control form-control-sm mb-9"> <asp:ListItem Value="0">Select Location</asp:ListItem> </asp:DropDownList> <asp:RequiredFieldValidator ID="rfvddlLocation" runat="server" ErrorMessage="*" ControlToValidate="ddl_Location" Font-Bold="False" Font-Names="Verdana" Font-Size="8pt" SetFocusOnError="True" ValidationGroup="v1" ForeColor="Red" InitialValue="0"></asp:RequiredFieldValidator> </ItemTemplate> </asp:TemplateField> </Columns> <FooterStyle BackColor="White" ForeColor="#000066" /> <HeaderStyle BackColor="#6777ef" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" /> <RowStyle ForeColor="#000066" /> <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" /> <SortedAscendingCellStyle BackColor="#F1F1F1" /> <SortedAscendingHeaderStyle BackColor="#007DBB" /> <SortedDescendingCellStyle BackColor="#CAC9C9" /> <SortedDescendingHeaderStyle BackColor="#00547E" /> code behind file protected void gvProgram_RowDataBound(object sender, GridViewRowEventArgs e) { DataSet ds = new DataSet(); Btech.Mode = "BindData"; ds = objDal.Adm(Btech); if (e.Row.RowType == DataControlRowType.DataRow) { if (ds.Tables[0].Rows.Count > 0 && ds.Tables[1].Rows.Count > 0) { DropDownList ddlProgram = (DropDownList)e.Row.FindControl("ddlProgram"); ddlProgram.Items.Clear(); ddlProgram.DataSource = ds.Tables[13]; ddlProgram.DataTextField = "Description"; ddlProgram.DataValueField = "CourseID"; ddlProgram.DataBind(); ddlProgram.Items.Insert(0, new ListItem("Select course", "0")); DropDownList ddl_Location = (DropDownList)e.Row.FindControl("ddl_Location"); //ddlTeacherNames.Items.Clear(); ddl_Location.DataSource = ds.Tables[14]; ddl_Location.DataTextField = "CenterName"; ddl_Location.DataValueField = "CentreCode"; ddl_Location.DataBind(); ddl_Location.Items.Insert(0, new ListItem("Select Location", "0")); } } } protected void ddlProgram_SelectedIndexChanged(对象发送者，EventArgs e) { } 好吧，有几件事我们必须处理。首先，加载 GridView。然后我们必须加载 2 个组合框，但还要为 2 个组合框设置正确的级联值。然后我们必须根据行数据源设置组合框的正确值。所以，理论上这里有 3 个步骤。这一步有点倒退，因为第二个组合框选择和值必须在第一个组合框中设置正确的值。然后，完成上述所有操作后，我们需要将组合框设置为在用户选择第一个组合框时正确级联，并级联到该 GridRow 中的第二个组合框。通常，这表明第一个组合框未绑定到给定行中的任何数据，但只有第二个组合框要绑定到给定行数据。我没有你的样本数据，但让我们假设一些人，我们选择城市，然后第二个级联组合框是他们选择的酒店。所以，首先是我们的 GridView 标记： <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" CssClass="table" Width="30%" OnRowDataBound="GridView1_RowDataBound"> <Columns> <asp:BoundField DataField="Firstname" HeaderText="Firstname" /> <asp:BoundField DataField="LastName" HeaderText="LastName" /> <asp:TemplateField HeaderText="Select Hotel City"> <ItemTemplate> <asp:DropDownList ID="cboCity" runat="server" Width="120px" Height="26px" DataTextField = "City" DataValueField = "City" AutoPostback="true" OnSelectedIndexChanged="cboCity_SelectedIndexChanged" > </asp:DropDownList> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Select Hotel"> <ItemTemplate> <asp:DropDownList ID="cboHotels" runat="server" Width="210px" Height="26px" DataValueField ="ID" DataTextField ="HotelName"> </asp:DropDownList> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> 我还要指出，我不关心 GridView 事件，我建议您也不要打扰。所以，首先是加载组合框的代码。 DataTable rstCity = new DataTable(); protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) LoadGrid(); } void LoadGrid () { // load up City list for combo box - all rows (scope = page) SqlCommand cmdSQL = new SqlCommand("SELECT City from City ORDER BY City"); rstCity = MyRstP(cmdSQL); // load up the grid cmdSQL.CommandText = "SELECT * from People ORDER BY FirstName"; GridView1.DataSource = MyRstP(cmdSQL); GridView1.DataBind(); } 好的，上面加载了 GridView。但是，如上所述，虽然我们有 2 个组合框（选择城市，然后在给定城市列表中选择一家酒店），但只需要保存第二个组合框选择。因此，在行数据绑定中，我们不仅要加载2个组合框，还要正确设置城市选择，然后根据该酒店加载酒店，然后选择酒店。 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { DataRowView gData = (DataRowView)e.Row.DataItem; // get the row data // load the city combo box DropDownList cboCity = (DropDownList)e.Row.FindControl("cboCity"); cboCity.DataSource = rstCity; cboCity.DataBind(); // add blank row for city cboCity.Items.Insert(0, new ListItem("Select City", "")); // We have to check if a hotel been selected. SqlCommand cmdSQL = new SqlCommand(); DropDownList cboHotels = (DropDownList)e.Row.FindControl("cboHotels"); Debug.Print($"<{gData["Hotel_ID"].ToString()}>"); if (gData["Hotel_ID"] != DBNull.Value) { cmdSQL = new SqlCommand("SELECT ID, City, HotelName FROM tblHotels WHERE ID = @ID"); cmdSQL.Parameters.Add("@ID", SqlDbType.Int).Value = gData["Hotel_ID"]; DataRow OneHotel = MyRstP(cmdSQL).Rows[0]; // now load Hotel combo box - but cascade from above City cbo string strSQL = @"Select ID, HotelName From tblHotels WHERE City = @City " + " ORDER BY HotelName"; cmdSQL = new SqlCommand(strSQL); cmdSQL.Parameters.Add("@City", SqlDbType.NVarChar).Value = OneHotel["City"]; DataTable rstHotels = MyRstP(cmdSQL); cboHotels.DataSource = rstHotels; cboHotels.DataBind(); cboHotels.Items.Insert(0, new ListItem("Select Hotel", "")); // set hotels combo to current selected cboHotels.SelectedValue = gData["Hotel_id"].ToString(); // set City combo box to current selected City cboCity.SelectedValue = OneHotel["City"].ToString(); } } } 所以，上面设置了一切。接下来是城市选择的级联。因此，请注意上面的组合框的标记是这样的： <asp:TemplateField HeaderText="Select Hotel City"> <ItemTemplate> <asp:DropDownList ID="cboCity" runat="server" Width="120px" Height="26px" DataTextField = "City" DataValueField = "City" AutoPostback="true" OnSelectedIndexChanged="cboCity_SelectedIndexChanged" > </asp:DropDownList> </ItemTemplate> 注意 autopost back = true 的情况。并记下组合框的事件设置。所以，城市组合框更改事件是这样的： protected void cboCity_SelectedIndexChanged(object sender, EventArgs e) { // city changed, so cascade Hotel cbo DropDownList cboCity = (DropDownList)sender; GridViewRow gRow = (GridViewRow)cboCity.NamingContainer; // filter hotels to current city string strCity = cboCity.SelectedItem.Text; DropDownList cboHotels = (DropDownList)gRow.FindControl("cboHotels"); if (strCity != "Select City") { SqlCommand cmdSQL = new SqlCommand(@"SELECT * from tblHotels WHERE City = @City ORDER BY HotelName"); cmdSQL.Parameters.Add("@City", SqlDbType.NVarChar).Value = strCity; cboHotels.DataSource = MyRstP(cmdSQL); cboHotels.DataBind(); cboHotels.Items.Insert(0, new ListItem("Select Hotel", "")); } } 当然，用户进行更改后，我们需要保存更改。所以，我们的保存按钮是这样的： protected void cmdSave_Click(object sender, EventArgs e) { foreach(GridViewRow gRow in GridView1.Rows) { DropDownList cboHotel = (DropDownList)gRow.FindControl("cboHotels"); if (cboHotel.SelectedIndex > 0) rstGrid.Rows[gRow.RowIndex]["Hotel_id"] = cboHotel.SelectedItem.Value; } using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4)) { string strSQL = "SELECT * FROM People ORDER BY FirstName,ID"; using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn)) { conn.Open(); SqlDataAdapter da = new SqlDataAdapter(cmdSQL); SqlCommandBuilder dau = new SqlCommandBuilder(da); da.Update(rstGrid); } } } 结果是这样的：所以，结果看起来像这样：

asp.net gridview drop-down-menu dropdown populate

回答 1 投票 0

在 React 中实现动态下拉菜单时遇到问题

我目前正在开发一个项目，需要在 React 中实现动态下拉菜单。我尝试过使用 React Select 和 React Dropdown 等库，但我遇到了更新问题...

javascript reactjs api react-hooks dropdown

回答 1 投票 0

下拉菜单未更改 onChanged 上的值

我正在获取我的Firestore数据并将其显示在下拉列表中，但是在该列表中，当我单击任何项目时，值或者我们可以说下拉列表的提示文本不会改变。流构建器<

flutter firebase dart google-cloud-firestore dropdown

回答 1 投票 0

Google 表格中的相关下拉菜单

我曾经在制作的 Excel 表格中跟踪我们的财务状况。我尝试将工作表移植到 Google 表格，但发现从属列的公式不再有效。我已经看过了...