I am not sure if id should be used in Select-Option, in any case id should be unique.
It does not appear to be any issue with your code.
Possible issue when displaying (hiding) option of the select if it is being displayed already.
You could try something like this:
<!--
<select id="ostan" class="DdlProvince">
<option data-grp="1" value="test1">test1</option>
<option data-grp="2" value="test2">test2</option>
</select>
<select id="shahr" class="DdlProvince">
<option data-grp="1" value="t1">t1</option>
<option data-grp="1" value="t2">t2</option>
<option data-grp="2" value="t3">t3</option>
<option data-grp="2" value="t4">t4</option>
</select>
$(document).ready(function () {
$('#ostan').change(function (e) {
var optionSelected = $("option:selected", this).attr('data-grp');
$("#shahr option").css('display', 'none');
$("#shahr option[data-grp='" + optionSelected + "']").css('display', 'block');
$("#shahr")[0].selectedIndex=$("#shahr option[data-grp='" + optionSelected + "']")[0].index;
});
});
Hope that helps out.
Link to the data-* attribute if you are interested:
http://html5doctor.com/html5-custom-data-attributes/[
^]
http://www.w3schools.com/tags/att_global_data.asp[
^]