Обновление всего списка выбора по имени класса нажатием кнопки

Question

Я использую jQuery и coldfusion.

Сценарий: У меня есть база данных транспортных средств и форма для обновления местоположения каждого транспортного средства. Допустим, у меня есть 10 автомобилей, которые едут в одно и то же место. Я хотел бы иметь возможность выбрать местоположение из выпадающего списка, а затем нажать другую кнопку, чтобы скопировать это выбранное значение на другие 9 транспортных средств.

Мне не удалось заставить его работать в моей основной форме, поэтому я создал приведенный ниже код, чтобы опробовать некоторые вещи. Я могу получить уникальный идентификатор и значение из выбора, соответствующего нажатой кнопке, но я не могу получить значения других списков выбора для обновления, как написано. Кто-нибудь может помочь?

<form>
    <select name="thisone" class="replicated" id="SystemType_10">
        <cfoutput>
            <cfloop index="x" from="1" to="10">
                <option value="Item #x#">Item #x#</option>
            </cfloop>
        </cfoutput>
    </select><img src="../iPhone/assets/images/whiteButton.png" width="29" height="46" border="0" align="absmiddle" class="vtip replicate" id="replicate_10" title="Copy this value down the list.">
    <br>
    <select name="thistwo" class="replicated" id="SystemType_500">
        <cfoutput>
            <cfloop index="y" from="1" to="10">
                <option value="Item #y#">Item #y#</option>
            </cfloop>
        </cfoutput>
    </select> <img src="../iPhone/assets/images/whiteButton.png" width="29" height="46" border="0" align="absmiddle" class="vtip replicate" id="replicate_500" title="Copy this value down the list." />
    <br>
    <select name="thisthree" class="replicated" id="SystemType_84">
        <cfoutput>
            <cfloop index="z" from="1" to="10">
                <option value="Item #z#">Item #z#</option>
            </cfloop>
        </cfoutput>
    </select> <img src="../iPhone/assets/images/whiteButton.png" width="29" height="46" border="0" align="absmiddle" class="vtip replicate" id="replicate_84" title="Copy this value down the list." />
</form> 

---

jQuery(document).ready(function() { //start of jQuery
    $('.replicate').click(function() {
        var CopybtnClicked = $(this).attr("id").split(""); // figure out which copy button was clicked and then get the ID number from it
        var sysID = CopybtnClicked[1]; // the value from using split are put into arrays starting with 0,1,2,3,etc. In this case
        // the value we need is the second so that is the ID we are looking for;
        var OriginalValue = $('#SystemType' + sysID).val(); // define the variable and then get the value from it;
        alert(OriginalValue);
        $("select option:contains('SystemType_')").val(OriginalValue);
        alert('done ' + OriginalValue);
    });
}) //end of jQuery

Answer 1

Вы были близки, просто нужно было исправить ошибку, получив sysID и синтаксис селектора CSS, чтобы найти другие поля выбора на странице.

jQuery (мои изменения следуют за строками, закомментированными с использованием / * code * /)

jQuery(document).ready(function() { //start of jQuery
    $('.replicate').click(function() {
        /* var CopybtnClicked = $(this).attr("id").split(""); */
        var CopybtnClicked = $(this).attr("id").split("_"); // figure out which copy button was clicked and then get the ID number from it
        var sysID = CopybtnClicked[1]; // the value from using split are put into arrays starting with 0,1,2,3,etc. In this case
        // the value we need is the second so that is the ID we are looking for;
        var OriginalValue = $('##SystemType_' + sysID).val(); // define the variable and then get the value from it;
        alert(OriginalValue);
        /*$("select option:contains('SystemType_')").val(OriginalValue);*/
        $("select[id^='SystemType_']").val(OriginalValue);
        alert('done ' + OriginalValue);
    });
}) //end of jQuery

HTML (для комментатора, который его запросил)

<form>
    <select name="thisone" class="replicated" id="SystemType_10">
        <option value="Item 1">Item 1</option>
        <option value="Item 2">Item 2</option>
        <option value="Item 3">Item 3</option>
        <option value="Item 4">Item 4</option>
        <option value="Item 5">Item 5</option>
        <option value="Item 6">Item 6</option>
        <option value="Item 7">Item 7</option>
        <option value="Item 8">Item 8</option>
        <option value="Item 9">Item 9</option>
        <option value="Item 10">Item 10</option>
    </select><img src="../iPhone/assets/images/whiteButton.png" width="29" height="46" border="0" align="absmiddle" class="vtip replicate" id="replicate_10" title="Copy this value down the list.">
    <br>
    <select name="thistwo" class="replicated" id="SystemType_500">      
        <option value="Item 1">Item 1</option>
        <option value="Item 2">Item 2</option>
        <option value="Item 3">Item 3</option>
        <option value="Item 4">Item 4</option>
        <option value="Item 5">Item 5</option>
        <option value="Item 6">Item 6</option>
        <option value="Item 7">Item 7</option>
        <option value="Item 8">Item 8</option>
        <option value="Item 9">Item 9</option>
        <option value="Item 10">Item 10</option>
    </select> <img src="../iPhone/assets/images/whiteButton.png" width="29" height="46" border="0" align="absmiddle" class="vtip replicate" id="replicate_500" title="Copy this value down the list." />
    <br>
    <select name="thisthree" class="replicated" id="SystemType_84"><        
        <option value="Item 1">Item 1</option>
        <option value="Item 2">Item 2</option>
        <option value="Item 3">Item 3</option>
        <option value="Item 4">Item 4</option>
        <option value="Item 5">Item 5</option>
        <option value="Item 6">Item 6</option>
        <option value="Item 7">Item 7</option>
        <option value="Item 8">Item 8</option>
        <option value="Item 9">Item 9</option>
        <option value="Item 10">Item 10</option>
    </select> <img src="../iPhone/assets/images/whiteButton.png" width="29" height="46" border="0" align="absmiddle" class="vtip replicate" id="replicate_84" title="Copy this value down the list." />
</form>