Добавление новых select по кнопке и чтобы скрипт работал с ними
Есть вот такой селект
Город:
<select name="fromcity_1" class="text" id="fromcity_1" from1onchange="mChange1(this);">
<option value="">-- Please Select --</option>
<?php foreach ( $citynameq as $citynamep ) { ?>
<option value="<?php echo $citynamep->city;?>"><?php echo $citynamep->city;?></option>
<?php } ?>
</select>
Район:
<select name="fromdistrict_1" class="text" id="fromdistrict_1">
<option value="N/A">N/A</option>
</select>
И есть вот такой скрипт, назовем его "Переключатель селектов", который меняет значение селекта fromdistrict_1 в зависимости от выбора селекта fromcity_1.
<script type="text/javascript">
var aHouseValues = new Array(
"-- Select city --",
<?php echo $district; ?>
);
function getHouseValuesByStreet(index){
var sHouseValues = aHouseValues[index];
return sHouseValues.split(",");
}
function MkHousefromValues(index){
var aCurrHouseValues = getHouseValuesByStreet(index);
var nCurrHouseValuesCnt = aCurrHouseValues.length;
var oHouseList = document.querySelector("select[name^=fromdistrict_]");
var oHouseListOptionsCnt = oHouseList.options.length;
oHouseList.length = 0;
for (i = 0; i < nCurrHouseValuesCnt; i++){
if (document.createElement){
var newHouseListOption = document.createElement("OPTION");
newHouseListOption.text = aCurrHouseValues[i];
newHouseListOption.value = aCurrHouseValues[i];
(oHouseList.options.add) ? oHouseList.options.add(newHouseListOption) : oHouseList.add(newHouseListOption, null);
}else{
oHouseList.options[i] = new Option(aCurrHouseValues[i], aCurrHouseValues[i], false, false);
}
}
}
//-->
</script>
Вопрос: как мне сделать возможность добавления копий селектов, чтобы при этом "Переключатель селектов" работал и с ними.
Ну, пример, по кнопке добавился вот такой селект:
<select name="fromcity_2" class="text" id="fromcity_1" from1onchange="mChange1(this);">
<option value="">-- Please Select --</option>
<?php foreach ( $citynameq as $citynamep ) { ?>
<option value="<?php echo $citynamep->city;?>"><?php echo $citynamep->city;?></option>
<?php } ?>
</select>
Район:
<select name="fromdistrict_2" class="text" id="fromdistrict_1">
<option value="N/A">N/A</option>
</select>
Как видно, изменился только name селектов, но "Переключатель селектов" работать, естественно, не будет так...
Так как сделать? =)
Весь код выглядит так (вырезал ненужное):
<script type="text/javascript">
var aHouseValues = new Array(
"-- Select city --",
<?php echo $district; ?>
);
function getHouseValuesByStreet(index){
var sHouseValues = aHouseValues[index];
return sHouseValues.split(",");
}
function MkHousefromValues(index){
var aCurrHouseValues = getHouseValuesByStreet(index);
var nCurrHouseValuesCnt = aCurrHouseValues.length;
var oHouseList = document.querySelector("select[name^=fromdistrict_]");
var oHouseListOptionsCnt = oHouseList.options.length;
oHouseList.length = 0;
for (i = 0; i < nCurrHouseValuesCnt; i++){
if (document.createElement){
var newHouseListOption = document.createElement("OPTION");
newHouseListOption.text = aCurrHouseValues[i];
newHouseListOption.value = aCurrHouseValues[i];
(oHouseList.options.add) ? oHouseList.options.add(newHouseListOption) : oHouseList.add(newHouseListOption, null);
}else{
oHouseList.options[i] = new Option(aCurrHouseValues[i], aCurrHouseValues[i], false, false);
}
}
}
//-->
</script>
<div class="main_wrapper">
<h1><?php echo __( '<strong>Add</strong> Car', AT_TEXTDOMAIN );?></h1>
<form method="post" action="<?php echo AT_Common::site_url('profile/vehicles/add/');?>" id="vehicle-form">
<div class="step_breadcrumb">
<a href="#" class="active" id="step_1"><?php echo __( 'step 1. announcement', AT_TEXTDOMAIN );?></a>
<a href="#" class="" id="step_2"><?php echo __( 'step 2. technical characteristics', AT_TEXTDOMAIN );?></a>
<a href="#" class="" id="step_3"><?php echo __( 'step 3. photo', AT_TEXTDOMAIN );?></a>
</div>
_________________________________________________________________________________________
<div class="sell_box step_2" style="display:none;">
<h2><?php echo __( '<strong>Technical</strong> Characteristics', AT_TEXTDOMAIN );?></h2>
<div class="col_1">
<div class="input_wrapper">
<div class="_from_where">
<div class="select_wrapper">
<label><span>* </span><strong><?php echo __( 'From:', AT_TEXTDOMAIN ); ?></strong></label>
<?php if (empty($car_info)) { ?>
Город:
<select name="fromcity_1" class="text" id="fromcity_1" from1onchange="mChange1(this);">
<option value="">-- Please Select --</option>
<?php foreach ( $citynameq as $citynamep ) { ?>
<option value="<?php echo $citynamep->city;?>"><?php echo $citynamep->city;?></option>
<?php } ?>
</select>
Район:
<select name="fromdistrict_1" class="text" id="fromdistrict_1">
<option value="N/A">N/A</option>
</select>
<br>
<input type="text" name="hide_cyty" class="text" id="from1_city" value="Введите город здесь" style="visibility: hidden;">
<input type="text" name="hide_district" class="text" id="from1_district" value="Введите район здесь" style="visibility: hidden;">
<?php } else { foreach ( $taxifrom as $from ) { ?>
<input type="text" class="text_add" name="<?php echo $from->meta_key; ?>" id="city" value="<?php echo $from->meta_value; ?>" />
<?php }} ?>
</div>
</div></div>
</div>
</div>
_______________________
Источник: Stack Overflow на русском