将jqueryui自动完成返回的值传递给另一个函数 [英] Pass value returned from jqueryui autocomplete to another function

问题描述

这是我的用例:用户选择从自动完成查找返回的选项.从查找返回的数据被分配给表单上的许多其他输入框.在表单的更深处，用户进入一个选择框，他们在其中选择链接类型".链接类型的选择会触发第二个功能，该功能将一些默认值(例如链接说明的样板文字)分配给一些相关的输入框.

Here's my use case: User selects an option returned from an autocomplete lookup. Data returned from the lookup is assigned to a number of other input boxes on the form. Further into the form, user gets to a select box where they choose a "Link type." The selection of a link type triggers a 2nd function which assigns some default values, such as boilerplate text for the link descriptions, to some related input boxes.

问题:如何将从自动完成功能中选择的值传递给第二个功能?

Question: How would I pass a value selected from my autocomplete function to my 2nd function?

这是自动完成代码:

$('#chooseChannel').val("");
$('#chooseHLProgName').val("");

$("#chooseHLProgName").autocomplete({
    source: function( request, response ) {
        $.getJSON( '/test/myCFC.cfc?', {
        method: 'qryMyMethod',
        returnformat: 'json',
            searchTerm: request.term,
            dsn: 'myDSN',
            virtChannel: $('#chooseChannel').val()
        }, response );
    },

    minLength: 3,

        select: function(event,ui) {
            $('#seriesID').val(ui.item.seriesid),
            $('#versionID').val(ui.item.versionid), 
            $('#channel').val($ ('#chooseChannel').val() ),
        $('#chooseHLTitle').val(ui.item.progFullTitle), 
        $('#chooseHLDesc').val(ui.item.progDesc), 
        $('#chooseHLDateTimeInfo').val(ui.item.progDateTime),
        $('#setScheduleURL').val('/schedules/listingDetails.cfm?seriesID=' + ui.item.seriesid + '&versionID=' + ui.item.versionid + '&virtChannel=' + $('#chooseChannel').val() + '&ThisDate=' + ui.item.progDate)  // This is the value I want to use in another function
    }
});

我需要当前(在自动完成功能内)分配给静态#setScheduleURL隐藏字段的值，而不是传递给下面的函数.具体来说，当用户从<select name="chooseHLLinkType1" id="chooseHLLinkType1">中选择<option value="scheduleLink">Link to schedule</option>时，我希望将分配给#setScheduleURL的值(在自动完成中)传递给案例选项$('input[name^=inputLinkURL'+ selectNum + ']').val( VALUE OF #SETSCHEDULEURL );

I need the value that's currently being assigned (inside the autocomplete) to the static #setScheduleURL hidden field to instead be passed to the function below. Specifically, when a user chooses <option value="scheduleLink">Link to schedule</option> from <select name="chooseHLLinkType1" id="chooseHLLinkType1">, I want the value assigned to #setScheduleURL (in the autocomplete) passed to the case option, $('input[name^=inputLinkURL'+ selectNum + ']').val( VALUE OF #SETSCHEDULEURL );

这是第二个功能:

// insert default text strings into input boxes based on value of selected 'chooseHLLinkType' option
$('select[name^=chooseHLLinkType]').change(function() {
    var selectValue = $(this).val();
    var selectNum = $(this).attr("id").charAt($(this).attr("id").length-1);
    switch(selectValue) {
        case 'webLink' :selectValue='Visit website';
            $('input[name=inputLinkText'+ selectNum + ']').val( selectValue );break;
        case 'videoLink' :selectValue='View Preview';
            $('input[name^=inputLinkText'+ selectNum + ']').val( selectValue );break;
        case 'scheduleLink' :selectValue='View schedule';
            $('select[name^=inputLinkLoc'+ selectNum + ']').val( 'internal' );
            $('input[name^=inputLinkURL'+ selectNum + ']').val( VALUE OF #SETSCHEDULEURL );
            $('input[name^=inputLinkText'+ selectNum + ']').val( selectValue );break;
        case 'customLink' :selectValue='';
            $('input[name^=inputLinkText'+ selectNum + ']').val( selectValue );break;
    }

});

这是html的相关部分.注意:分配动态ID是因为可以克隆此组相关表单字段(chooseHLLinkType，inputLinkLoc，inputLinkURL，inputLinkText).

And here's the relevant portion of the html. Note: dynamic ids are assigned because this set of related form fields (chooseHLLinkType, inputLinkLoc, inputLinkURL, inputLinkText) can be cloned.

<div id='clonedSection1' class='clonedSection'>
    <p><label for="chooseHLLinkType1" id="chooseHLLinkTypeLabel1">Related Info Type<br />
        <cfselect name="chooseHLLinkType1" id="chooseHLLinkType1">
            <option value="none">-SELECT ONE-</option>
            <option value="webLink">Website link</option>
            <option value="videoLink">Link to video</option>
            <option value="scheduleLink">Link to schedule</option>
            <option value="customLink">Custom link</option>
        </cfselect>
    </label></p>

    <p><label for="inputLinkLoc1" id="inputLinkLocLabel1">Link Location<br />
        <cfselect name="inputLinkLoc1" id="inputLinkLoc1">
            <option value="none">-SELECT ONE-</option>
            <option value="internal">Internal: it's on our site</option>
            <option value="external">External: it's out on the World Wild Web</option>
        </cfselect>
    </label></p>

    <p><label for="inputLinkURL1" id="inputLinkURLLabel1">Link URL<br />
    <cfinput type="text" name="inputLinkURL1" id="inputLinkURL1" size="50" />
    </label></p>

    <p><label for="inputLinkText1" id="inputLinkTextLabel1">Link text<br />
    <cfinput name="inputLinkText1" id="inputLinkText1" size="20" maxlength="13" required="no" />
    </label></p>
</div>

到目前为止，我没有尝试过任何方法.谢谢您的建议.

Nothing I've tried so far has worked. Thank you for your suggestions.

推荐答案

您可以像这样访问#setScheduleURL的值:

You can access the value of #setScheduleURL like this:

$('#setScheduleURL').val() 

这篇关于将jqueryui自动完成返回的值传递给另一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！