JSFiddle - React, Tailwind, and code Playground
HTML
<table align="left" >
<tr>
<td><form name="form" action="#" method="get">
<tr>
<td>
Города:<br />
Город на Б <br>
<select name='city_form' id='city_form40' class='StyleSelectBox' >
<option value='0'>- выберите Город Пожалуйста -</option><option value="Бердск" onclick="addOption(sel);">Бердск (Б - 'Б')</option>
</select></td><tr><td> Город на О <br>
<select name='city_form' id='city_form143' class='StyleSelectBox' >
<option value='0'>- выберите Город Пожалуйста -</option><option value="Обь" onclick="addOption(sel);">Обь (О - 'О')</option>
</select></td><tr><td> Город на Н <br>
<select name='city_form' id='city_form247' class='StyleSelectBox' >
<option value='0'>- выберите Город Пожалуйста -</option><option value="Новосибирск" onclick="addOption(sel);">Новосибирск (Н - 'Н')</option>
</select></td><tr><td>
</select></td><tr><td>
Категории подкатегорий:<br />
<select name="main_id" id="main_id" disabled="disabled" class="StyleSelectBox">
<option value="0">- выберите подкатегорию -</option>
</select></td><tr><td>
Организации:<br />
<select name="city_id" id="city_id" disabled="disabled" class="StyleSelectBox">
<option value="0">- выберите организацию -</option>
</select>
</td>
</tr>
</form></td>
</tr>
</table>
JavaScript
$(document).ready(function () {
//$(this).attr('id')
$("select").focus(function(){
var zz = $(this).attr('id');
var n = zz.search("form");
//alert(n);
if (n == '5') {
$(this).attr('id', 'city_form'); // <- замена атрибута здесь
//if ($(this).is(":first-child")) {
var arr2 = 'city_form';
//alert('ready');
}
//alert ("arr2");
$("#" + arr2).change(function () {
// $(this).attr('id', 'city_form');
//alert ('arr[0]');
var city_form = $(this).val();
if (city_form == '0') {
$('#main_id').html('<option>- выберите регион -</option>');
$('#main_id').attr('disabled', true);
$('#city_id').html('<option>- выберите город -</option>');
$('#city_id').attr('disabled', true);
return(false);
}
$('#main_id').attr('disabled', true);
$('#main_id').html('<option>загрузка...</option>');
var url = 'get_regions.php';
$.get(
url,
"city_form=" + city_form,
function (result) {
if (result.type == 'error') {
alert('error');
return(false);
}
else {
var options = '';
$(result.regions).each(function() {
options += '<option value="' + $(this).attr('main_id') + '">' + $(this).attr('podrubrika') + '</option>';
});
$('#main_id').html('<option value="0">- выберите регион -</option>'+options);
$('#main_id').attr('disabled', false);
$('#city_id').html('<option>- выберите город -</option>');
$('#city_id').attr('disabled', true);
}
},
"json"
);
});
$('#main_id').change(function () {
var main_id = $(this).val(); //$('#main_id :selected').val();
//alert (main_id);
if (main_id == '0') {
$('#city_id').html('<option>- выберите город -</option>');
$('#city_id').attr('disabled', true);
return(false);
}
$('#city_id').attr('disabled', true);
$('#city_id').html('<option>загрузка...</option>');
var url = 'get_city.php';
$.get(
url,
"main_id=" + main_id,
function (result) {
if (result.type == 'error')...