Criando mais de um retorno de chamada de mudança com o plugin DropKick jQuery
-
12-12-2019 - |
Pergunta
Estou usando o excelente Plug-in DropKick jQuery como parte de um mecanismo de pesquisa em um site.DropKick está estilizando uma caixa de seleção que o usuário usa para escolher qual site pesquisar.A Pesquisa personalizada do Google está sendo usada e consegui dizer ao DropKick para alterar o valor de um campo '#cx' oculto - o campo #cx informa ao Google qual conta de pesquisa usar.
Aqui está o 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>
Aqui está o código jQuery funcional que altera o valor do campo oculto '#cx' dependendo do mecanismo de pesquisa escolhido pelo usuário:
$('.dk').dropkick({
change: function (value, label) {
var x = $(this).val();
$('#cx').val(x);
}
});
Isso é ótimo.Entretanto, a ação do formulário também precisa ser alterada com base na seleção do usuário.Isso é possível usando este plugin?Em caso afirmativo, que alterações preciso fazer no código jQuery?Já ultrapassei os limites do meu conhecimento com isso!
Agradecemos antecipadamente por qualquer ajuda.
Saúde
Solução
Alterar o método de ação é tão simples quanto alterar qualquer outro atributo.Portanto, no seu método .change, basta fazer uma verificação e alterar a ação de acordo com o valor.
$('.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);
}
});