JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<select id="bondState" onchange="fnGetBondNameList(this.options[this.selectedIndex].value);">
    <option value=""></option>
    <option value="CA">CA</option>
    <option value="FL">FL</option>
</select>
                          
<select class="select2"  id="bondName"></select>

JavaScript

function fnGetBondNameList(bondState) {
    $.ajax({
        url: '/echo/xml/',
        method: 'post',
        data: {
        	xml : '<Surety><SuretyLine><Commercial><Bond><GeneralInformation UI="BondInfo"><Name ID="bondName" PrefillValue="Yes">Contractor 1</Name><State ID="bondState" PrefillValue="Yes">CA</State></GeneralInformation><Image></Image><Status>Online</Status></Bond><Bond><GeneralInformation UI="BondInfo"><Name ID="bondName" PrefillValue="Yes">Contractor 2</Name><State ID="bondState" PrefillValue="Yes">FL</State></GeneralInformation><Image></Image><Status>Online</Status></Bond></Commercial></SuretyLine></Surety>'
        },
        success: function (xml) {
            parseSelectXML(xml,"bondName","Bond",bondState);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Status: " + xhr.status);
            alert("Error: " + thrownError);
        }
    });
}

function parseSelectXML(xml, selectid, xmlnode,bondState) {
    var selecthtml = '', selectBondName;
    $(xml).find(xmlnode).each(function () {
        if (bondState == $(this).find('GeneralInformation').find('State').text()) {
            selectBondName = $(this).find('GeneralInformation').find('Name').text();
            selecthtml += '<option value="' + selectBondName + '">' + selectBondName + "(" + bondState + ")" + '</option>';
        }
    });
    $('#' + selectid).append(selecthtml).val(selectBondName);
}