Jquery TokenInput根据Dropdown中的Selected选项预填充

Question

我需要根据从旁边的readonly字段填充的内容，使用jquery tokeninput预先填充文本字段。该读取文本字段根据用户从下拉列表中的选择进行填充。对于实现这一目标的最佳方式，我处于停滞状态。基本上需要将textfield（name = hndarea）中的值复制到它旁边的下拉列表（name = selarea），而不是使用tokeninput。其他的都是文本字段，一个只读（hndManager1），另一个（name = txtManager1）不能只使用tokeninput读取。用户可以根据需要更改非只读文本字段和下拉列表中的内容。

loc.js文件

    function setLocDropdown_other() {
    var strval = $("#selPin").val();
    if (strval != '') {
    var $select = $('#selLocation')
    $select.empty();
    $select.append('<option value="" selected> --Please select--</option>');
    getdropdowndata('/cfc/LocMatrix.cfc?method=getLocJson&Pin=' + strval,$select,'',strval)

    }
}

function getLocInfo(obj)
{
    var $Pin = $("#selPin").val();
    var $Loc = $("#selLocation").val().split("~");

     $.ajax({
        url: "/cfc/LocMatrix.cfc?method=LocMatrixDetailsJson&Pin=" + $Pin + '&Location='+ $Loc[0],
        dataType: "json",
        maxrow: 1,
        dataFilter: function (data) { return data; },
        success: function (data) {
             //map columns to names
            $('#hndVP').val('')
            $('#hndManager1').val('')
            var columnMap = {}
            for (var i = 0; i < data.COLUMNS.length; i++) {
                columnMap[data.COLUMNS[i]] = i    
            }

             for (var i = 0; i < data.DATA.length; i++) {
             $('#trChangeValue').show() 
             $('#hndarea').val(data.DATA[i][columnMap.area])
             $('#hndarea').show()
             if (data.DATA[i][columnMap.VP_E] != null) {$('#hndVP').val(data.DATA[i][columnMap.VP_E])}
             $('#hndVP').show()
             if (data.DATA[i][columnMap.Loc_MGR_E1] != null) {$('#hndManager1').val(data.DATA[i][columnMap.Loc_MGR_E1])}
             $('#hnManager1').show()
        }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
        }
    });
}

page.cfm

    <script>
$(document).ready(function()
    {
//autocomplete using tokeInput....      
    $("#txtVP").tokenInput("/cfc/users.cfc?method=userAutoCompleteJSON", {
            theme: "vweb",
            tokenLimit: 1,
            queryParam: "exchUsername",
            tokenFormatter: function(item){
                return "<li><p>" + item.id + "</p></li>"
            }

        });
        $("#txtManager1").tokenInput("/cfc/users.cfc?method=userAutoCompleteJSON", {
            theme: "vweb",
            tokenLimit: 1,
            queryParam: "exchUsername",
            tokenFormatter: function(item){
                return "<li><p>" + item.id + "</p></li>"
            }

        });
})
    </script>



        <cfoutput>
        <script>
            $(document).ready(function()
            {  
                <cfif form.txtRequestor neq "">
                $("##txtRequestor").tokenInput("add", {id: "#form.txtRequestor#", name:"#form.txtRequestor#"});
                </cfif>
                <cfif form.txtVP neq "">
                $("##txtVP").tokenInput("add", {id: "#form.txtVP#", name:"#form.txtVP#"});
                </cfif>
                <cfif form.txtManager1 neq "">
                $("##txtManager1").tokenInput("add", {id: "#form.txtManager1#", name:"#form.txtManager1#"});
                </cfif>

            });
        </script>



        </cfoutput>


                <tr>
                <td class="tdheader">area <span class="required">*</span></td>
                <td>
                    <div style="float:left;"><input type="text" id="hndarea" name="hndarea"  class="hndFields" readonly="true" value="#form.hndarea#"></div>
                    <div style="float:left;">
                    <cfselect name="selarea" style="width:233px;">
                    <cfloop query="#getLocMatrixSelectionP['area']#">
                        <option value="#val#" <cfif form.selarea eq val>Selected</cfif>>#desc#</option>
                    </cfloop>
                    </cfselect>
                    <span id="label_selarea" class="err"></span>
                    </div>
                    </td>
            </tr>


                        <tr>
                <td class="tdheader" valign="top">VP <span class="required">*</span></td>
                <td valign="top">
                    <div style="float:left;"><input type="text" id="hndVP" name="hndVP" class="hndFields" readonly="true" value="#form.hndVP#"></div>
                    <div style="float:left;"><cfinput type="text" name="txtVP" style="float:left !important;">
                   <span id="label_txtVP" class="err"></span></div></td>
            </tr>
            <tr>
                <td class="tdheader" valign="top">Manager 1 <span class="required">*</span></td>
                <td nowrap="nowrap">
                    <div style="float:left;"><input type="text" id="hndManager1" name="hndManager1" class="hndFields" readonly="true" value="#form.hndManager1#"></div>
                    <div style="float:left;"><cfinput type="text" name="txtManager1">
                    <span id="label_txtManager1" class="err"></span></div>
                </td>
            </tr>