JSFiddle - React, Tailwind, and code Playground

by Jaybles

HTML

<form name="selectionForm">
    <select id="stateListBox" name="stateListBox" size="3" style="width: 150px">
        <option selected>Select a State >></option>
        <option value="oregon">Oregon</option>
        <option value="washington">Washington</option>
    </select>

    <select id="cityListBox" name="cityListBox" size="3" style="width: 150px" onclick="alert(this.options[this.options.selectedIndex].value);">
    </select>
</form>

JavaScript

var cities = new Array();

cities[0] = "";
cities[1] = ["Eugene|eugeneValue", "Portland|portlandValue", "Salem|salemValue"];
cities[2] = ["Bellingham|bellinghamValue", "Onalaska|onalaskaValue", "Seattle|seattleValue"];

$('#stateListBox').click(function(){
    var cityGroup=this.selectedIndex;
    $('#cityListBox').html('');
    for (i = 0; i < cities[cityGroup].length; i++)
        $('#cityListBox').append('<option value="' + cities[cityGroup][i].split("|")[1] + '">' + 
                   cities[cityGroup][i].split("|")[0] + 
                   '</option>');

});