JSFiddle - React, Tailwind, and code Playground

by Luke Stevenson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<form onsubmit="return false;">
  <fieldset>
  <!-- Form Name -->
  <legend>Test Form</legend>
  <!-- Select Basic -->
  <div class="form-group">
    <label class="col-4 control-label" for="select_one">Initial List</label>
    <div class="col-8">
      <select id="select_one" name="select_one" class="form-control">
        <option value="">Loading...</option>
      </select>
    </div>
  </div>
  <!-- Select Basic -->
  <div class="form-group">
    <label class="col-4 control-label" for="select_two">Secondary List</label>
    <div class="col-8">
      <select id="select_two" name="select_two" class="form-control">
        <option value="">Loading...</option>
      </select>
    </div>
  </div>

  <!-- Button (Double) -->
  <div class="form-group">
    <div class="col-12 text-center">
      <button id="button1id" name="button1id" class="btn btn-success">Good Button</button>
      <button id="button2id" name="button2id" class="btn btn-danger">Scary Button</button>
    </div>
  </div>
  </fieldset>
</form>

JavaScript

var selectableValues = [
	{
  	'title' : 'Words Starting With A' ,
    'values' : [
    	'Apple' ,
      'Aardvark' ,
      'Alfalfa'
    ]
  } ,
  {
  	'title' : 'Words Starting With B' ,
    'values' : [
    	'Banana' ,
      'Beyond' ,
      'Belong'
    ]
  }
];

var $select_one = $select_two = false;

jQuery(function($){

	$select_one = $('#select_one');
  $select_two = $('#select_two');
  
	// Populate Select One
  $.each(selectableValues, function(k,v){
  	$select_one.append('<option value="'+k+'">'+v.title+'</option>');
  });
  $('option:first',$select_one).text('Select...');
  $select_one.on('change',function(){
  	populateSelectTwo(this.value);
  });

});

function populateSelectTwo( parentKey ){
	$('option',$select_two).remove();
  $select_two.append('<option value="">Select...</option>');
  $.each(selectableValues[parentKey].values, function(k,v){
  	$select_two.append('<option value="'+k+'">'+v+'</option>');
  });
}