JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<div style="margin-top:10px;" id="apoid1">
  <select id="user_ld_0_pistol_magz0" style="height:20px;">
    <option value="999"></option>
    <option value="0" slotp="1" selected="">Makarov PM</option>
    <option value="1" slotp="1">M1911</option>
    <option value="2" slotp="1">APS</option>
    <option value="3" slotp="1">APS SD</option>
    <option value="4" slotp="1">Sa-61</option>
    <option value="5" slotp="1">G17</option>
    <option value="6" slotp="1">M9 SD</option>
    <option value="7" slotp="1">M9</option>
    <option value="8" slotp="1">Makarov SD</option>
    <option value="9" slotp="1">PDW</option>
    <option value="10" slotp="1">Revolver</option>
    <option value="11" slotp="1">TT</option>
    <option value="12" slotp="1">CZ-75</option>
    <option value="13" slotp="1">CZ-83</option>
    <option value="14" slotp="1">Desert Eagle</option>
  </select>
  <br>
  <select id="user_ld_0_pistol_magz1" style="height:20px;">
    <option value="999" selected=""></option>
    <option value="0" slotp="1">Makarov PM</option>
    <option value="1" slotp="1">M1911</option>
    <option value="2" slotp="1">APS</option>
    <option value="3" slotp="1">APS SD</option>
    <option value="4" slotp="1">Sa-61</option>
    <option value="5" slotp="1">G17</option>
    <option value="6" slotp="1">M9 SD</option>
    <option value="7" slotp="1">M9</option>
    <option value="8" slotp="1">Makarov SD</option>
    <option value="9" slotp="1">PDW</option>
    <option value="10" slotp="1">Revolver</option>
    <option value="11" slotp="1">TT</option>
    <option value="12" slotp="1">CZ-75</option>
    <option value="13" slotp="1">CZ-83</option>
    <option value="14" slotp="1">Desert Eagle</option>
  </select>
  <br>
  <select id="user_ld_0_pistol_magz2" style="height:20px;">
    <option value="999" selected=""></option>
    <option value="0" slotp="1">Makarov PM</option>
    <option value="1" slotp="1">M1911</option>
    <option value="2" slotp="1">APS</option>
    <option...

CSS

.apocheck {
  margin: 10px 0px;
  padding: 10px;
  background: #ffaaaa;
  width: 200px;
}

JavaScript

var apowe1 = 0,
  apowe2 = 0;

function apocheckslotp() {
  apowe1 = 0;
  apowe2 = 0;

  $('#apoid1 option[selected]').each(function() {
    if($(this).attr('slotp') == 1) {
      apowe1 = apowe1 + parseInt($(this).attr('slotp'));
    };
  });
  
  $('#apoid2 option[selected]').each(function() {
    if($(this).attr('slotp') == 1) {
      apowe2 = apowe2 + parseInt($(this).attr('slotp'));
    };
  });

  if (parseInt(apowe1+apowe2) <= 8) {
    alert('Нормально (' + apowe1 + ' + ' + apowe2 + ' = ' + parseInt(apowe1+apowe2) + ')');
  } else {
    alert('Больше 8 слотов (' + apowe1 + ' и ' + apowe2 + ' = ' + parseInt(apowe1+apowe2) + ')');
  };
}

$(function() {
  $('div#apoid1 select, #apoid2 select').change(function() {
    apocheckslotp();
  });
})