JSFiddle - React, Tailwind, and code Playground

Select List Fix

by Meredith Crow

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://yakabod.yakabox.com/custom/css/cache/137de011e0fc2440ce11c99272733d49.css?yakabox-vne-5.17.8-1">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/yakabox4.9.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/themes/yakabox/ui.themeroller.theme.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/ui.yakabox.contentadd.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/jquery-ui.structure.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/themes/ui-dialog/ui.themeroller.theme.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/bootstrap.css">
<div tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front formDialog contentAdd ui-draggable ui-resizable" aria-describedby="selectDialog" aria-labelledby="ui-id-4" style=" height: auto; width: 630px;">
  <div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle">
    <span id="ui-id-4" class="ui-dialog-title">Select List Options</span>
    <button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close"...

SCSS

.ui-webform-select-list {
  display: inline-block; 
  padding-left: 20px; 
	min-width: 500px;
  
  .ui-icon-grip-dotted-vertical {
      float:left;
  }
  .ui-select-list-label {
      float:left;
  }
  .ui-select-list-content {
      width: 70%;
      margin-left: 10px;
      float:left;
      padding: 1px 2px;
			resize: none;
			overflow: auto;
			text-rendering: auto;
      color: initial;
      letter-spacing: normal;
      word-spacing: normal;
      text-transform: none;
      text-indent: 0px;
      text-shadow: none;
      display: inline-block;
      text-align: start;
			cursor: text;
      font: 400 11px system-ui;
   }
   .ui-select-list-content-short {
   		width: 30%;
   }
   .ui-select-list-delete-icon {
      cursor: pointer;
      float:left; 
      margin-left: 10px;
      margin-right: 10px;
   }
   select {
      float:left;
      width: 40%;
			
   }
}

JavaScript

$('button').click(function() {
    var options = $('select.whatever option');
    var arr = options.map(function(_, o) {
        return {
            t: $(o).text(),
            v: o.value
        };
    }).get();
    arr.sort(function(o1, o2) {
        return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
    });
    options.each(function(i, o) {
        console.log(i);
        o.value = arr[i].v;
        $(o).text(arr[i].t);
    });
});