JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<div style="display: inline-block; border: 3px solid rgb(255, 255, 255); padding: 5px; background-color: rgba(255, 255, 255, 0.862745);">
  <div style="display: inline-block; vertical-align: top; margin: 5px;">
    <div>Audio Bitrate</div>
    <select disabled="disabled" multiple="multiple" style="width: 120px; height: 180px;">
      <option title="64" value="64">64</option>
      <option title="96" selected="selected" value="96">96</option>
    </select>
  </div>
  <div style="display: inline-block; vertical-align: top; margin: 5px;">
    <div>Video Bitrate</div>
    <select multiple="multiple" style="width: 120px; height: 180px;">
      <option title="100" value="100">100</option>
      <option title="270" value="270">270</option>
      <option title="350" value="350">350</option>
      <option title="540" value="540">540</option>
      <option title="790" value="790">790</option>
      <option title="1050" value="1050">1050</option>
      <option title="1470" value="1470">1470</option>
      <option title="1960" value="1960">1960</option>
      <option title="2610" value="2610">2610</option>
    </select>
  </div>
  <div style="display: inline-block; vertical-align: top; margin: 5px;">
    <div>CDN</div>
    <select multiple="multiple" style="width: 120px; height: 180px;">
      <option title="[10594] c021.nyc001.ix.nflxvideo.net" selected="selected" value="10594">[10594] c021.nyc001.ix.nflxvideo.net</option>
      <option title="[10944] c054.nyc001.ix.nflxvideo.net" value="10944">[10944] c054.nyc001.ix.nflxvideo.net</option>
      <option title="[15615] c115.iad001.ix.nflxvideo.net" value="15615">[15615] c115.iad001.ix.nflxvideo.net</option>
      <option title="[19] akamaitp" value="19">[19] akamaitp</option>
    </select>
  </div>
  <div style="width: 100%; text-align: center;">
    <button>Override</button>
    <button>Reset</button>
  </div>
</div>

JavaScript

var quLst = $('div:contains("Video Bitrate")').next('select').find('option').map(function() {return this.value;}).get();
function closest(array,num){
    var i=0;
    var minDiff=1000;
    var ans;
    for(i in array){
         var m=Math.abs(num-array[i]);
         if(m<minDiff){ 
                minDiff=m; 
                ans=array[i]; 
            }
      }
    return ans;
}

$('div:contains("Video Bitrate")').next('select').find('option[value="'+closest(quLst,1300)+'"]').prop('selected', true);