JSFiddle - React, Tailwind, and code Playground

HTML

<select name="sehirid" id="sehir" class="form-control">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<select name="ilceid" id="ilce" class="form-control">
    <optgroup label="Option 1">
        <option parent="Option 1" value="1">Option 1</option>
        <option parent="Option 1" value="2">Option 2</option>
        <option parent="Option 1" value="3">Option 3</option>
    </optgroup>
    <optgroup label="Option 2">
        <option parent="Option 2" value="1">Option 1</option>
        <option parent="Option 2" value="2">Option 2</option>
        <option parent="Option 2" value="3">Option 3</option>
    </optgroup>
    <optgroup label="Option 3">
        <option parent="Option 3" value="1">Option 1</option>
        <option parent="Option 3" value="2">Option 2</option>
        <option parent="Option 3" value="3">Option 3</option>
    </optgroup>
</select>

JavaScript

$('#sehir').change(function() {
    var sehir = $(this).find('option:selected').text();
    var optgroup = $('#ilce').find('optgroup[label="' + sehir + '"]');
    $('#ilce').find('optgroup').prop('disabled', false).not(optgroup).prop('disabled', true);
});