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

时间:2011-01-14 16:03:50

标签: jquery select coldfusion

我正在使用jQuery和coldfusion。

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

我无法让它以我的主要形式工作,所以我创建了下面的代码来尝试一些事情。我能够从单击按钮的选择中获取唯一ID和值,但是我无法将其他选择列表值添加到udpate中。有人可以帮忙吗?

<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

1 个答案:

答案 0 :(得分:0)

你很接近,只需要通过获取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>