right now my site use dropdown list for select product size but now i want to change it like(below screen shot)

Dropdown code:

    <select name="variation-size" id="variation-size" class="variant">
 <option value="">Select size</option>
@foreach (var variant in product.Variants)
{

<option value="">Select size</option>
@foreach (var variant in product.Variants)
{
int variantStock = 0;
bool stockcheckSucces = int.TryParse(variant.GetProperty("InventoryOnHand").GetValue().ToString(), out variantStock);
string value = variant.GetProperty("Size").GetValue().ToString();
if (variantStock > 0)
{
<option value="@value">@value</option>
}
else
{
<option disabled value="@value">@value</option>
}
}
</select>

ul li code:

<div class="col-xs-12">
<ul class="variant" id="variation-size" name="variation-size">
@foreach (var variant in product.Variants)
{
int variantStock = 0;
bool stockcheckSucces = int.TryParse(variant.GetProperty("InventoryOnHand").GetValue().ToString(), out variantStock);
string value = variant.GetProperty("Size").GetValue().ToString();
if (variantStock > 0)
{
<li><a href="#">@value</a></li>
}
else
{
<li><a href="#">@value</a></li>
}
}
</ul>
</div>

in dropdown when i select size then it stored in "variation-size" id but in

• when i select size then it's pass null value. i mean not selected.

  i have get "variation-size" value using javascript function for dropdown.

  so any one know how i can do this or any other way without use

  • .

    thanks in advance.