Изменение следующего раскрывающегося списка с предыдущим выпадающим событием onchange

Я немного запутался в своей следующей проблеме.

В моем текущем веб-приложении у меня есть два выпадающего списка.

<select name="country"> <option value="">All</option> <option value="">India</option> <option value="">China</option> </select> 

А также

  <select name="state"> <option value="">All</option> <option value="">state1</option> <option value="">state2</option> </select> 

Теперь мне нужно сделать, когда когда-либо я выбираю Индию из страны, тогда второй выпадающий список должен показывать все индийское государство, и когда я выбираю фарфор, он должен показать все китайское состояние во втором выпадающем списке.

Я использую две таблицы для страны и государства со следующими полями

Таблица страны с столбцами: country_id, country_name

Состояние таблицы с coulmn: state_id, country_id, state_name

Я храню имя штата на основе country_id в таблице состояний.

Предложите мне.