私信  •  关注

erkind dunya

erkind dunya 最近回复了
6 年前
回复了 erkind dunya 创建的主题 » JS或Jquery上基于类别选择的复杂计算

  $("input[type='text'].element").blur(function(e) {
  var result = $("<span name='result'>");
  var multiplier = $(`table#${$("#ProductOrigin").val()} tbody > tr[product='${$(this).attr("id")}'] > td[volume='${$("#Volume>option:selected").val()}']`).text();
  $(this).next("span").remove();
  result.text($(this).val() * multiplier);
  $(this).after(result);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <label class="description" for="ProductOrigin">Product Origin</label>
    <select class="element select medium" id="ProductOrigin" name="ProductOrigin">
        <option value="" selected="selected"></option>
        <option value="Europe">Europe</option>
        <option value="Asia">Asia</option>
        <option value="China">China</option>
        <option value="India">India</option>
        <option value="USA">USA</option>
        <option value="Africa">Africa</option>
    </select>
</div>
<div>
    <label class="description" for="Volume">Volume</label>
    <select class="element select medium" id="Volume" name="Volume">
        <option value="" selected="selected"></option>
        <option value="10">10</option>
        <option value="100">100</option>
        <option value="1000">1000</option>
        <option value="2000">2000</option>
        <option value="3000">3000</option>
        <option value="4000">4000</option>
        <option value="5000">5000</option>
        <option value="6000">6000</option>
        <option value="6000">6000</option>
        <option value="8000">8000</option>
        <option value="9000">9000</option>
        <option value="10000">10000</option>
        <option value="20000">20000</option>
        <option value="30000">30000</option>
        <option value="40000">40000</option>
        <option value="50000">50000</option>
    </select>
</div>
<div>
    <label class="description" for="Apple">Apple</label>
    <input id="Apple" name="Apple" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
    <label class="description" for="Apricot">Apricot</label>
    <input id="Apricot" name="Apricot" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
    <label class="description" for="Banana">Banana</label>
    <input id="Banana" name="Banana" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
    <label class="description" for="Bilberry">Bilberry</label>
    <input id="Bilberry" name="Bilberry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
    <label class="description" for="Blackberry">Blackberry</label>
    <input id="Blackberry" name="Blackberry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
    <label class="description" for="Blackcurrant">Blackcurrant</label>
    <input id="Blackcurrant" name="Blackcurrant" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
    <label class="description" for="Blueberry">Blueberry</label>
    <input id="Blueberry" name="Blueberry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
    <label class="description" for="Boysenberry">Boysenberry</label>
    <input id="Boysenberry" name="Boysenberry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
    <label class="description" for="Cherry">Cherry</label>
    <input id="Cherry" name="Cherry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
    <label class="description" for="Coconut">Coconut</label>
    <input id="Coconut" name="Coconut" class="element text medium" type="text" maxlength="255" value="" />
</div>


<table id="Europe">
    <thead>Europe</thead>
        <tr>
            <td>Europe</td>
            <th id=10>10</th>
            <th id=100>100</th>
            <th id=1000>1000</th>
            <th id=2000>2000</th>
            <th id=3000>3000</th>
            <th id=4000>4000</th>
            <th id=5000>5000</th>
            <th id=6000>6000</th>
            <th id=7000>7000</th>
            <th id=8000>8000</th>
            <th id=9000>9000</th>
            <th id=10000>10000</th>
            <th id=20000>20000</th>
            <th id=30000>30000</th>
            <th id=40000>40000</th>
            <th id=50000>50000</th>
        </tr>
    <tbody>
        <tr product='Apple'>
            <td>Apple</td>
            <td volume='10'>0.1</td>
            <td volume='100'>0.5</td>
            <td volume='1000'>1</td>
            <td volume='2000'>2</td>
            <td volume='3000'>3</td>
            <td volume='4000'>4</td>
            <td volume='5000'>5</td>
            <td volume='6000'>6</td>
            <td volume='7000'>7</td>
            <td volume='8000'>8</td>
            <td volume='9000'>9</td>
            <td volume='10000'>10</td>
            <td volume='20000'>11</td>
            <td volume='30000'>12</td>
            <td volume='40000'>13</td>
            <td volume='50000'>14</td>
        </tr>
        <tr product='Apricot'>
                <td>Apricot</td>
                <td volume='10'>0</td>
                <td volume='100'>0</td>
                <td volume='1000'>0</td>
                <td volume='2000'>0.5</td>
                <td volume='3000'>1</td>
                <td volume='4000'>1.5</td>
                <td volume='5000'>2</td>
                <td volume='6000'>2.5</td>
                <td volume='7000'>3</td>
                <td volume='8000'>3.5</td>
                <td volume='9000'>4</td>
                <td volume='10000'>4.5</td>
                <td volume='20000'>5</td>
                <td volume='30000'>5.5</td>
                <td volume='40000'>6</td>
                <td volume='50000'>7</td>
        </tr>
        <tr product='Banana'>
                <td>Banana</td>
                <td volume='10'>0.1</td>
                <td volume='100'>0.5</td>
                <td volume='1000'>1</td>
                <td volume='2000'>5</td>
                <td volume='3000'>10</td>
                <td volume='4000'>15</td>
                <td volume='5000'>20</td>
                <td volume='6000'>25</td>
                <td volume='7000'>27</td>
                <td volume='8000'>30</td>
                <td volume='9000'>33</td>
                <td volume='10000'>36</td>
                <td volume='20000'>40</td>
                <td volume='30000'>45</td>
                <td volume='40000'>50</td>
                <td volume='50000'>55</td>
              </tr>
              <tr product='Bilberry'>
                <td>Bilberry</td>
                <td volume='10'>1</td>
                <td volume='100'>5</td>
                <td volume='1000'>10</td>
                <td volume='2000'>15</td>
                <td volume='3000'>20</td>
                <td volume='4000'>25</td>
                <td volume='5000'>30</td>
                <td volume='6000'>35</td>
                <td volume='7000'>40</td>
                <td volume='8000'>45</td>
                <td volume='9000'>50</td>
                <td volume='10000'>55</td>
                <td volume='20000'>60</td>
                <td volume='30000'>65</td>
                <td volume='40000'>70</td>
                <td volume='50000'>75</td>
              </tr>
              <tr product='Blackberry'>
                <td>Blackberry</td>
                <td volume='10'>0.1</td>
                <td volume='100'>5</td>
                <td volume='1000'>10</td>
                <td volume='2000'>20</td>
                <td volume='3000'>50</td>
                <td volume='4000'>75</td>
                <td volume='5000'>100</td>
                <td volume='6000'>125</td>
                <td volume='7000'>150</td>
                <td volume='8000'>175</td>
                <td volume='9000'>200</td>
                <td volume='10000'>225</td>
                <td volume='20000'>250</td>
                <td volume='30000'>275</td>
                <td volume='40000'>300</td>
                <td volume='50000'>350</td>
              </tr>
              <tr product='Blackcurrant'>
                <td>Blackcurrant</td>
                <td volume='10'>0.1</td>
                <td volume='100'>0.5</td>
                <td volume='1000'>1</td>
                <td volume='2000'>2</td>
                <td volume='3000'>2</td>
                <td volume='4000'>4</td>
                <td volume='5000'>4</td>
                <td volume='6000'>4</td>
                <td volume='7000'>6</td>
                <td volume='8000'>6</td>
                <td volume='9000'>6</td>
                <td volume='10000'>8</td>
                <td volume='20000'>8</td>
                <td volume='30000'>10</td>
                <td volume='40000'>12</td>
                <td volume='50000'>14</td>
              </tr>
              <tr product='Blueberry'>
                <td>Blueberry</td>
                <td volume='10'>0.1</td>
                <td volume='100'>0.5</td>
                <td volume='1000'>1</td>
                <td volume='2000'>4</td>
                <td volume='3000'>6</td>
                <td volume='4000'>8</td>
                <td volume='5000'>10</td>
                <td volume='6000'>12</td>
                <td volume='7000'>14</td>
                <td volume='8000'>16</td>
                <td volume='9000'>18</td>
                <td volume='10000'>20</td>
                <td volume='20000'>24</td>
                <td volume='30000'>28</td>
                <td volume='40000'>30</td>
                <td volume='50000'>36</td>
              </tr>
              <tr product='Boysenberry'>
                <td>Boysenberry</td>
                <td volume='10'>0.5</td>
                <td volume='100'>1</td>
                <td volume='1000'>2.5</td>
                <td volume='2000'>4</td>
                <td volume='3000'>5.5</td>
                <td volume='4000'>7</td>
                <td volume='5000'>8.5</td>
                <td volume='6000'>10</td>
                <td volume='7000'>11.5</td>
                <td volume='8000'>13</td>
                <td volume='9000'>14.5</td>
                <td volume='10000'>16</td>
                <td volume='20000'>17.5</td>
                <td volume='30000'>19</td>
                <td volume='40000'>20.5</td>
                <td volume='50000'>22</td>
              </tr>
              <tr product='Cherry'>
                <td>Cherry</td>
                <td volume='10'>0.5</td>
                <td volume='100'>1</td>
                <td volume='1000'>2.5</td>
                <td volume='2000'>5</td>
                <td volume='3000'>8</td>
                <td volume='4000'>10</td>
                <td volume='5000'>15</td>
                <td volume='6000'>20</td>
                <td volume='7000'>25</td>
                <td volume='8000'>28</td>
                <td volume='9000'>31</td>
                <td volume='10000'>35</td>
                <td volume='20000'>40</td>
                <td volume='30000'>45</td>
                <td volume='40000'>50</td>
                <td volume='50000'>55</td>
              </tr>
              <tr product='Coconut'>
                <td>Coconut</td>
                <td volume='10'>0.1</td>
                <td volume='100'>0.25</td>
                <td volume='1000'>0.5</td>
                <td volume='2000'>0.5</td>
                <td volume='3000'>1</td>
                <td volume='4000'>1</td>
                <td volume='5000'>2</td>
                <td volume='6000'>2</td>
                <td volume='7000'>2</td>
                <td volume='8000'>2</td>
                <td volume='9000'>2.5</td>
                <td volume='10000'>2.5</td>
                <td volume='20000'>3</td>
                <td volume='30000'>3</td>
                <td volume='40000'>3</td>
                <td volume='50000'>3</td>
              </tr>
    </tbody>
</table>
计算下拉匹配表

这是工作版本。