JSFiddle - React, Tailwind, and code Playground

by lTasty

HTML

<p><label for="id_country">Country :</label> <select id="id_region" name="region">
<option value="" selected="selected">---------</option>
<option value="1">USA</option>
<option value="2">France</option>
</select></p>
<p><label for="id_region">Region :</label> <select id="id_city" name="city">
<option value="" selected="selected">---------</option>
<option value="1">California</option>
<option value="2">New-York</option>
<option value="3">Oregon</option>
<option value="4">Tenessee</option>
<option value="5">Paris</option>
<option value="6">Bretagne</option>
    </select>

JavaScript

$("#id_region").change(function(){
    $("#id_city option[value!='']").hide();
	if($(this).val()==1){
        $("#id_city option").each(function(){
        	if($(this).val() >=1 && 4>=$(this).val()){
            	$(this).show();
            }
        });
    }
    if($(this).val()==2){
        $("#id_city option").each(function(){
        	if($(this).val() >=5 && 6>=$(this).val()){
            	$(this).show();
            }
        });
    }
});