Добавление новых select по кнопке и чтобы скрипт работал с ними

Рейтинг: 0Ответов: 1Опубликовано: 26.10.2014

Есть вот такой селект

Город:
            <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>

        _______________________

Ответы