JSFiddle - React, Tailwind, and code Playground

by btevfik

HTML

<select id="statelist">
        <option value="up">up</option>
        <option value="mp">mp</option>
        <option value="ka">ka</option>
    </select>

<select id="citieslist">
    <option value="Delhi">Delhi</option>
    <option value="Mumbai">Mumbai</option>
    <option value="Noida">Noida</option>
    <option value="Bangalore">Bangalore</option>
</select>

JavaScript

$(document).ready(function(){

    $('#statelist option').mouseout(function() {
        var t = $('#statelist').val();
        document.getElementById('statelist').value = t;
        $("#statelist").change();
        $("#statelist option").hide();
    });
    $('#statelist').mouseover(function() {
        var t = $('#statelist').val();
        document.getElementById('statelist').value = t;
        $("#statelist option").show();
    });

    $('#citieslist option').mouseout(function() {
        var t = $('#citieslist').val();
        document.getElementById('citieslist').value = t;
        $("#citieslist").change();
        $("#citieslist option").hide();
    });
    $('#citieslist').mouseover(function() {
        var t = $('#citieslist').val();
        document.getElementById('citieslist').value = t;
        $("#citieslist option").show();
    });

});