单击按钮后如何使下拉列表可见(how to make a dropdownlist visible once clicking a button)

单击按钮后如何使下拉列表可见(how to make a dropdownlist visible once clicking a button)

我是初学者，希望我可以帮助解决我的问题，我想在点击按钮后看到一个下拉列表，它完全像在这里完成的事情： 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"); });

每一个帮助都是欣赏:)，

I am a beginner, Hope one can help me with my problem, I want to make a drop down list visible once I click the button, It completely like the thing that has been done here: 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

when the customer clicks on Buy button then a drop-down list appear above of the buy button,I think this example in the mentioned website is clear enough,

EDITION

as the code shows, when I click on BUY button it opens up a new link, I'm not wanna to do this, at first when someone click the button it has to not work and just show the drop-down list, secondly, when the user chooses a size from the drop-down list and then click on the button it has to work and open the link,

it is exactly what happen in the above link that I have introduced. my stuff:

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

this was my drop-down list and button and also javascript :`

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

every help is appreciating :),

最满意答案

默认情况下，您可以使用下拉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 } });

You can put drop down list hidden by default using style attribute in drop down div as

style="display:none"

on click of button you can show the drop down list. For this code will be as follow:

CSHTML

EDIT: You achieve required functionality First remove onclick event from button control.

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

in js file

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

EDIT: alternately if want to show drop down with animated effect and want to open BUY link after size selection use this script.

$('#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 } });