如何在单击按钮后使下拉列表可见

how to make a dropdownlist visible once clicking a button

本文关键字：下拉列表 按钮 单击      更新时间：2023-09-26

我是个初学者，希望有人能帮我解决问题，我想在单击按钮后显示一个下拉列表，它完全像这里所做的事情：https://shop.adidas.co.in/#category/Pag-60/No-0/All/面。DIVISION_CATEGORY_ss:%28%22鞋类%22%29%20和%20allBrands_ss:%28%22原产地%22%29

当客户点击购买按钮时，购买按钮上方会出现一个下拉列表，我认为上面提到的网站中的这个例子已经足够清楚了，

版本

如代码所示，当我点击"购买"按钮时，它会打开一个新的链接，我不想这么做，起初，当有人点击按钮时，它必须不起作用，只显示下拉列表，其次，当用户从下拉列表中选择一个大小，然后点击按钮时，它必须工作并打开链接，

这正是我在上面介绍的链接中发生的事情。我的东西：

<button name="buySize" id="buySize" type="button" class="btn btn-success btn-sm" onclick="location.href='@Url.Action("AddToCart", "ShoppingCart", new { Barcode = @item.Barcode },"")'">
    خرید &raquo;
</button>
<div class="pull-left">
    <label class="control-label" id="drpSize">سایز:</label>
    <div class="product-quantity" id="drpSize" >
        @Html.DropDownListFor(model => model.CartItems[0].Size, new SelectList(Model.Sizes))
    </div>
</div>

这是我的下拉列表和按钮以及javascript:`

$('#buySize').click(function () {
    if (this.click())
        $('#drpSize').show("fast");
    else
        $('#drpSize').hide("fast");
});

每一个帮助都值得赞赏：），

您可以使用下拉列表div中的style属性将下拉列表默认隐藏为

style="display:none"

单击按钮可以显示下拉列表。对于此代码将如下所示：

CSHTML

编辑：您实现了所需的功能首先删除onclick事件从按钮控制。

 <button name="buySize" id="buySize" type="button" class="btn btn-success btn-sm">
  خرید &raquo;</button>
   <div class="pull-left">
     <label class="control-label" id="drpSize">سایز:</label>
      <div class="product-quantity" id="drpSize" style="display:none" >
       @Html.DropDownListFor(model => model.CartItems[0].Size, new SelectList(Model.Sizes))                                                              </div>
    </div>

在js文件中

 $('#buySize').click(function () {
           $('#drpSize').css('display','block'); 
        });

编辑：如果要显示具有动画效果的下拉菜单想要在选择大小后打开购买链接，请使用此脚本。

 $('#buySize').click(function () {
   $('#drpSize').show('fast');
var val= $('#dropDownId :selected').text();
if(val!='Select'){
location.href= //which ever link you want to open put here
}
 });

试试这个：

  1. 您的下拉列表最初被css隐藏，即display:none

当用户点击购买按钮时显示Jquery代码：

$('#buySize').click(function () {
   $('#dropdown_id').show();
});
相关文章：