Creating more than one change callback with the DropKick jQuery plugin

Question

I'm using the excellent DropKick jQuery plugin as part of a search facility on a website. DropKick is styling a select box which the user uses to choose which website to search. Google Custom Search is being used, and I have been successful in telling DropKick to change the value of a hidden '#cx' field - the #cx field tells Google which search account to use.

Here is the HTML:

<form action="http://example1.com/search/" method="get" id="cse-search-box">
    <fieldset>
        <input type="hidden" name="cx" id="cx" value="custom_search_account_1" />
        <input type="hidden" name="cof" value="FORID:11" />
        <input type="hidden" name="ie" value="UTF-8" />            
        <div class="keywords">
            <label for="keywords">Search</label>
            <input type="text" name="q" id="keywords" class="search text" />
        </div>
        <select name="dk" class="dk">
            <option value="custom_search_account_1">Search website 1</option>
            <option value="custom_search_account_2">Search website 2</option>
            <option value="custom_search_account_3">Search website 3</option>
        </select>
        <input type="image" class="button" src="imgurl" alt="Search" name="sa" />
    </fieldset>
</form>

Here is the working jQuery code which changes the value of the hidden '#cx' field depending on the search engine the user chooses:

$('.dk').dropkick({
    change: function (value, label) {
        var x = $(this).val();                
        $('#cx').val(x);
    }
});

That's all great. However, the form action also needs to be changed based on the user's selection. Is this possible using this plugin? If so, what changes to the jQuery code do I need to make please? I've already pushed the limits of my knowledge with this!

Thanks in advance for any assistance.

Cheers

Answer 1

Changing the action method is as simple as changing any other attribute. So in your .change method simply do a check and change the action conforming to the value.

Here's a fiddle

$('.dk').dropkick({
    change: function (value, label) {
        var x = $(this).val();                
        var action;
        $('#cx').val(x);

        if (x == 'custom_search_account_1') { action = 'action1'; }
        else if (x == 'custom_search_account_2') { action = 'action2'; }
        else if (x == 'custom_search_account_2') { action = 'action2'; }


        $('#cse-search-box').attr('action', action);

     }
});