JSFiddle - React, Tailwind, and code Playground

by lucasprus

HTML

<input type="text" value="" name="options[725]" class="custom-width input-text required-entry  product-custom-option" id="options_725_text">

<input type="text" value="" name="options[726]" class="custom-drop input-text required-entry  product-custom-option" id="options_726_text">

<select  title="" class=" required-entry product-custom-option custom-dimensions " id="select_724" name="options[724]"><option value="">-- Please Select --</option><option price="24.8" value="78101">46cmx61cm +£24.80</option><option price="26.04" value="78102">46cmx76cm +£26.04</option><option price="27.28" value="78103">46cmx91cm +£27.28</option><option price="29.76" value="78104">46cmx106cm +£29.76</option><option price="31" value="78105">46cmx121cm +£31.00</option><option price="33.48" value="78106">46cmx136cm +£33.48</option><option price="34.72" value="78107">46cmx151cm +£34.72</option><option price="37.2" value="78108">46cmx166cm +£37.20</option><option price="39.68" value="78109">46cmx181cm +£39.68</option><option price="39.68" value="78110">46cmx196cm +£39.68</option><option price="40.92" value="78111">46cmx211cm +£40.92</option><option price="43.4" value="78112">46cmx226cm +£43.40</option><option price="44.64" value="78113">46cmx241cm +£44.64</option><option price="44.64" value="78114">46cmx256cm +£44.64</option><option price="44.64" value="78115">46cmx271cm +£44.64</option><option price="44.64" value="78116">46cmx286cm +£44.64</option><option price="45.88" value="78117">46cmx301cm +£45.88</option><option price="27.28" value="78118">61cmx61cm +£27.28</option><option price="29.76" value="78119">61cmx76cm +£29.76</option><option price="31" value="78120">61cmx91cm +£31.00</option><option price="32.24" value="78121">61cmx106cm +£32.24</option><option price="33.48" value="78122">61cmx121cm +£33.48</option><option price="38.44" value="78123">61cmx136cm +£38.44</option><option price="39.68" value="78124">61cmx151cm +£39.68</option><option price="43.4" value="78125">61cmx166cm...

JavaScript

var $jjj = jQuery.noConflict();


// Add new attributes : blind_width and blind_drop
$jjj(".custom-dimensions option:gt(0)").attr({
    "blind_width": function() {
        var str = $jjj(this).text();
        return str.substring(0, str.indexOf('cmx'));
    },
    "blind_drop": function() {
        var str = $jjj(this).text();
        return str.substring(str.indexOf('cmx') + 3, str.indexOf(' ') - 2);
    }
});

// Update selected dropdown option with values from input fields
$jjj(".custom-drop, .custom-width").change(function() {

    $jjj(this).css("background-color", "#D6D6FF");

    var blind_width = $jjj(".custom-width").get(0).value;

    var blind_drop = $jjj(".custom-drop").val();

    var first_greater_width = $jjj(".custom-dimensions option").filter(function() {
        return $jjj(this).attr("blind_width") >= parseInt(blind_width,10);

    }).first();

    //console.log(blind_width );
    //console.log(blind_drop );
    console.log(first_greater_width);
    //console.log(first_greater_width == null);
    if (!first_greater_width.size()) {
        alert('Invalid width value');
        return;
    }

    var first_greater_width_value = first_greater_width.attr("blind_width");

    var first_greater_drop = $jjj(".custom-dimensions option[blind_width='" + first_greater_width_value + "' ]").filter(function() {
        return $jjj(this).attr("blind_drop") >= parseInt(blind_drop,10);
    }).first();

    if (!first_greater_drop.size()) {
        alert('Invalid drop value');
        return;
    }
    $jjj(".custom-dimensions option").removeAttr("selected");
    first_greater_drop.attr("selected", true);

});