通过单击按钮按类名称更新所有选择列表

Question

我正在使用 jQuery 和 Coldfusion。

设想： 我有一个车辆数据库和一个用于更新每辆车位置的表格。假设我有 10 辆车要去同一地点。我希望能够从下拉项中选择一个位置，然后单击另一个按钮将该所选值复制到其他 9 辆车。

我无法让它在我的主窗体中工作，因此我创建了下面的代码来尝试一些事情。我能够从与单击的按钮相对应的选择中获取唯一 ID 和值，但无法按写入方式获取其他选择列表值进行更新。有人可以帮忙吗？

<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 （我的更改遵循使用 /* 代码 */ 注释掉的行）

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>