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 },"")'">
خرید »
</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 :),
Try this :
Jquery code to show it when user click on buy button:
$('#buySize').click(function () {
$('#dropdown_id').show();
});
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">
خرید »</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
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.