JSFiddle - React, Tailwind, and code Playground

by will525

HTML

<div class="optRow">
    <div id="content_incProductInfo_incMainProduct_divSelectSize" class="lText"> Select Size:<span style="display: block; font-size: 10px; margin: 4px 0;"> Chest/Length </span></div>
    <div class="rText sizeSelectorCnt">
        <ul class="sizeSelector">
            <li class='lowstock'><a href="#" 
data-prodsize="197"> 10% </a></li>
            <li class='lowstock'><a href="#" 
data-prodsize="204"> 20% </a></li>
            <li class='instock'><a href="#" 
data-prodsize="207"> 30% </a></li>
            <li class='lowstock'><a href="#" 
data-prodsize="210"> 40% </a></li>
            <li class='lowstock'><a href="#" 
data-prodsize="213"> 50% </a></li>
            <li class='lowstock'><a href="#" 
data-prodsize="215"> 60% </a></li>
            <li class='instock'><a href="#" 
data-prodsize="207"> 70% </a></li>
            <li class='lowstock'><a href="#" 
data-prodsize="210"> 80% </a></li>
            <li class='lowstock'><a href="#" 
data-prodsize="213"> 90% </a></li>
            <li class='lowstock'><a href="#" 
data-prodsize="215"> 100% </a></li>
        </ul>
        <input name="ctl00$content$incProductInfo$incMainProduct$incChooseSize$hdnVariationID" type="hidden" id="content_incProductInfo_incMainProduct_incChooseSize_hdnVariationID" class="variation266" />
    </div>
</div>

CSS

.optRow .sizeSelectorCnt{width:500px}
.sizeSelector,.sizeSelector{clear:both;list-style:none;overflow:hidden;float:left;margin:0 0 3px 0;width:100%}
.sizeSelector li{float:left;margin:0 3px 0 0}
.ie6 .sizeSelector li{width:25px}
.sizeSelector li a{border:1px solid #EEE;display:inline-block;font-size:16px;height:30px;line-height:20px;min-width:20px;padding:0 2px;text-align:center;text-decoration:none; color: #000;}
.sizeSelector li.nostock a{background:#f2f2f2;color:#656565}
.sizeSelector li.nostock a:hover{color:#656565;text-decoration:none}
.sizeSelector li a.selected{background:#000;color:#fff}

JavaScript

function SizeBoxSelectors() {
    // Adds functionality to the size selectors
    $('.sizeSelectorCnt .sizeSelector li').mousedown(function (e) {
        // Set the hidden input box to the current selected value
        $(this).parents('.sizeSelectorCnt').find('input[type=hidden]').val($('a', this).data('prodsize'));

        // Check if there is stock
        if ($(this).hasClass('nostock')) {
            // No stock so show a no stock option
            $(this).parents('.optRow').next('.prodStockReminder').slideDown('fast');
        } else {
            // Remove all old active classes
            $(this).parents('.sizeSelectorCnt').find('li a').removeClass('selected');
            // Add new active class to this size
            $('a', this).addClass('selected');
        }
        e.preventDefault();
        return false;
    }).click(function (e) {
        // Return false so we dont get the #
        e.preventDefault();
    });

    // Stock reminder coding
    $('.prodStockReminder .btnCancel').click(function (e) {
        $(this).parents('.prodStockReminder').slideUp('fast');
        e.preventDefault();
    });

}


SizeBoxSelectors();