JSFiddle - React, Tailwind, and code Playground

by Rajesh Sitaraman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<select id="state">
  <option value=""></option>
  <option value="Production Geoscience">Production Geoscience</option>
  <option value="Wells">Wells</option>
  <option value="PetroPhysics">PetroPhysics</option>
  <option value="GeoChem">GeoChem</option>
</select>
<select id="region">
  <option value=""></option>
  <option value="Americas">Americas</option>
  <option value="Asia">Asia</option>
  <option value="Global">Global</option>
  <option value="Europe">Europe</option>
</select>
<div id='log'>
</div>

JavaScript

var state, region;
var BuildQueryFilter = function() {
  state = $("#state").val();
  region = $("#region").val();
  if ((state) && (region)) {
    logit(state + " and " + region);
  } else if (state) {
    logit(state);
  } else if (region) {
    logit(region);
  }
}
$("#state").change(BuildQueryFilter());
$("#region").change(BuildQueryFilter());

function logit(msg) {
  $('#log').append(msg + '</br>');
}