单击按钮后如何显示下拉列表

Question

我是一个初学者，希望有人可以帮助我解决我的问题，我想在单击按钮后显示一个下拉列表，这完全像在这里所做的事情： https ： //shop.adidas.co。 in /＃category / Pag-60 / No-0 / 0 / All / facet .DIVISION_CATEGORY_ss：％28％22FOOTWEAR％22％29％20AND％20allBrands_ss：％28％22ORIGINALS％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");
});

每个帮助都令人感激:)，

Answer 1

尝试这个 ：

1. 您的下拉菜单最初是由CSS隐藏的。 显示：无

用户单击“购买”按钮时显示的jQuery代码：

$('#buySize').click(function () {
   $('#dropdown_id').show();
});

Answer 2

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

style="display:none"

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

网页HTML

编辑：实现所需的功能首先从按钮控件中删除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
}
 });