Question

I’m using jQuery and coldfusion.

Scenario:
I have a database of vehicles and a form to update the location of each vehicle. Let’s say I have 10 vehicles that are going to the same location. I’d like to be able to select a location from the drop down item and then click another button to copy that selected value to the other 9 vehicles.

I wasn’t able to get it to work in my main form so I created the code below to try out some things. I’m able to get the unique ID and the value from the select corresponding to the button clicked but I cannot get the other select lists values to udpate as written. Can anyone help?

<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

You were close, just needed to correct error with getting the sysID and the CSS selector syntax to find the other select boxes on the page.

jQuery (my changes follow lines commented out using /* 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 (for commenter who requested it)

<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>