JSFiddle - React, Tailwind, and code Playground

by B

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
<form novalidate="novalidate" class="simple_form edit_user" id="edit_user_9" action="/users/9" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch"><input type="hidden" name="authenticity_token" value="tHp/BfrEpc4o9ZBWD6Va3Kd5lLlxTlNXpFFssx9vsGvc7upmpbg/xCfkgyhYOEbb66M+Wxpv7LSlRWFdEmdsXA==">



  <div class="form-inputs">
    <div class="form-group string optional user_primary_role form-group-valid"><label class="form-control-label string optional" for="user_primary_role">Primary role</label><input class="form-control is-valid string optional" type="text" value="douch" name="user[primary_role]" id="user_primary_role" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; background-repeat: no-repeat no-repeat;"></div>
    <div class="form-group select optional user_secondary_role"><label class="form-control-label select optional" for="user_secondary_role">Secondary Role(s):</label><input name="user[secondary_role][]" type="hidden" value=""><select class="form-control select optional  simple_form_bgcolour simple_form_position overide_selection_field_width"
        size="4" multiple="multiple" name="user[secondary_role][]"...

JavaScript

var el = document.querySelector("#user_secondary_role")
  el.addEventListener('change', function() {
    if (el.value == "") {
      roles = el.querySelectorAll("option")
      for (var value of roles) {
        value.selected = false
      }
    }
  });