JSFiddle - React, Tailwind, and code Playground

by alvaroveliz

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script src="https://raw.githubusercontent.com/deitch/jstree-grid/master/jstreegrid.js"></script>
<label>
  Portafolios
</label>
<select>
  <option>Portafolio 1</option>
  <option>Portafolio 2</option>
  <option>Portafolio 3</option>
</select>
<label>
  Perfil
</label>
<select name="roles" id="roles">
  <option value="Jefe de Proyectos">Jefe de Proyectos</option>
  <option value="Miembro de equipo">Miembro de equipo</option>
  <option value="Stakeholder">Stakeholder</option>
  <option value="Visualizador">Visualizador</option>
</select>
<input type="button" id="assign" value="Asignar perfil">
<div id="jstree_demo_div">
  <ul>
    <li class="jstree-open">
      Area 1
      <ul>
        <li>SubArea 1.1</li>
        <li>SubArea 1.2</li>
        <li>SubArea 1.3</li>
      </ul>
    </li>
    <li class="jstree-open">
      Area 2
      <ul>
        <li>Subarea 2.1</li>
        <li>SubArea 2.2</li>
        <li>SubArea 2.3</li>
      </ul>
    </li>
  </ul>
  
</div>

SCSS

@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow);

body {
  background: #FFFFFF;
  font-family:'PT Sans Narrow', 'Helvetica', 'Arial', sans-serif;
}

select {
  border: 1px solid #DDD;
  padding: 5px 10px;
  font-size: 12px;
}
label {
  font-weight: bold;
}


#jstree_demo_div {
  padding: 20px;
  background: #EEEEEE;
  margin-top: 20px;
  ul {
    li {
      font-size: 14px;
      position: relative;
      .jstree-tag {
        display:inline-block;
        background: #1D87AD;
        color: #FFF;
        border-radius: 2px;
        padding: 0 6px;
        margin-left: 50px;
      }
    }
  }
}

.jstree-default .jstree-anchor {
  height: 30px;
}

JavaScript

$('#jstree_demo_div').jstree({
  plugins : [ "core", "ui", "checkbox", "wholerow" ],
});

$('#assign').on('click', function(){
  checked = $('#jstree_demo_div').jstree('get_checked');
  rol = $('#roles').val();
  $.each(checked, function(){
    $('#'+this+'_anchor').find('.jstree-tag').remove();
    $('#'+this+'_anchor').append('<span class="jstree-tag">'+rol+'</span>')
  })
});