Creare più di una modifica Callback con il plug-in Dropkick JQuery
-
12-12-2019 - |
Domanda
Sto usando l'eccellente dropkick jquery plugin come parte di una funzione di ricerca su un sito web.Dropkick sta styling una casella Seleziona che l'utente utilizza per scegliere quale sito web da cercare.La ricerca personalizzata di Google è in uso, e ho avuto successo nel dire a Dropkick di modificare il valore di un campo "#cx" nascosto - il campo #cx dice a Google quale ricerca dell'account da utilizzare.
Ecco l'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>
.
Ecco il codice jquery funzionante che modifica il valore del campo "#cx" nascosto A seconda del motore di ricerca, l'utente sceglie:
$('.dk').dropkick({
change: function (value, label) {
var x = $(this).val();
$('#cx').val(x);
}
});
.
È tutto fantastico.Tuttavia, anche l'azione del modulo deve essere modificata in base alla selezione dell'utente.È possibile utilizzare questo plug-in?Se è così, quali modifiche al codice jQuery devo fare per favore?Ho già spinto i limiti della mia conoscenza con questo!
Grazie in anticipo per qualsiasi assistenza.
Cheers
Soluzione
La modifica del metodo di azione è semplice come cambiare qualsiasi altro attributo. Quindi nel tuo metodo .Change semplicemente fai un controllo e modificare l'azione conforme al valore.
$('.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);
}
});
.