[英]how to make a dropdownlist visible once clicking a button
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 我是一个初学者,希望有人可以帮助我解决我的问题,我想在单击按钮后显示一个下拉列表,这完全像在这里所做的事情: 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 },"")'">
خرید »
</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 :` 这是我的下拉列表和按钮以及javascript:
$('#buySize').click(function () {
if (this.click())
$('#drpSize').show("fast");
else
$('#drpSize').hide("fast");
});
every help is appreciating :), 每个帮助都令人感激:),
Try this : 尝试这个 :
Jquery code to show it when user click on buy button: 用户单击“购买”按钮时显示的jQuery代码:
$('#buySize').click(function () {
$('#dropdown_id').show();
});
You can put drop down list hidden by default using style
attribute in drop down div
as 您可以使用下拉
div
style
属性将默认情况下的下拉列表隐藏为
style="display:none"
on click of button you can show the drop down list. 点击按钮,您可以显示下拉列表。 For this code will be as follow:
对于此代码将如下所示:
CSHTML 网页HTML
EDIT: You achieve required functionality First remove onclick event from button control.
编辑:实现所需的功能首先从按钮控件中删除onclick事件。
<button name="buySize" id="buySize" type="button" class="btn btn-success btn-sm">
خرید »</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 在js文件中
$('#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
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.