JSFiddle - React, Tailwind, and code Playground

by statjsfd

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>

<select class="grid rows">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select class="grid cols">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
</select>
<input type="text" id="max" />test
<select id="grid" size="10" multiple="multiple" class="selectpicker show-tick" data-max-options="2">
    <option>01</option>
    <option>02</option>
    <option>03</option>
    <option>04</option>
    <option>05</option>
    <option>06</option>
    <option>07</option>
    <option>08</option>
    <option>09</option>
    <option>10</option>
</select>

JavaScript

$(".grid").change(function (event) {
    var rows = $(".grid.rows option:selected").val();
    var cols = $(".grid.cols option:selected").val();
    var grid = rows * cols;
    if (grid == 0) {
        $('#max').val('');
    } else {
        $('#max').val(grid);
    }
});