Como posso verificar se todas as caixas selecionadas têm uma opção selecionada por meio de JavaScript ou jQuery ou…?
-
21-09-2019 - |
Pergunta
Eu tenho 2 caixas selecionadas em uma página com um número variável de opções.
Por exemplo:
<fieldset>
<label for="fizzwizzle">Select a Fizzwizzle</label>
<select name="fizzwizzle" id="fizzwizzle" size="10">
<option>Fizzwizzle_01</option>
<option>Fizzwizzle_02</option>
<option>Fizzwizzle_03</option>
<option>Fizzwizzle_04</option>
</select>
</fieldset>
<fieldset>
<label for="fizzbaggot">Select a Fizzbaggot</label>
<select name="fizzbaggot" id="fizzbaggot" size="10">
<option>Fizzbaggot_01</option>
</select>
</fieldset>
Gostaria de verificar se essas duas caixas selecionadas têm uma opção selecionada. Meu pensamento inicial é simplesmente usar o jQuery, mas não consigo descobrir como fazer isso. Minhas tentativas até agora foram inúteis, mas tenho o seguinte código que acho que deve funcionar com o link que falta.
function verify_selectboxen_selection() {
var allSelected = true;
$('select').each(function() {
/* if select box doesn't have a selected option */
allSelected = false;
break;
});
if (!allSelected) {
alert('You must select a Job and a Disposition File.');
}
return allSelected;
}
Parece simples o suficiente. Pensamentos?
Solução
Em jQuery você pode usar o :selected
Seletor para obter as opções totais selecionadas. Este número para corresponder ao número de selecionados:
if ($("select").length === $("option:selected").length) {
// they match
}
Outras dicas
Eu gostaria de verificar se essas duas caixas selecionadas têm uma opção selecionada
Não é possível para um (nãomultiple
) select
caixa não Para ter uma opção selecionada! Se você não declarar selected
em um dos option
S, o navegador selecionará automaticamente a primeira opção.
Então: return true;
:-)
Se você quiser ter um estado inicial 'não selecionado', teria que incluir uma opção option
Para isso, geralmente o primeiro:
<select name="fizzbaggot">
<option value="" selected="selected">(Select a fizzbaggot)</option>
<option>foo</option>
<option>baz</option>
<option>bar</option>
</select>
Então você pode verificar se uma opção diferente para essa foi selecionada, dizendo:
$('select').each(function() {
if ($(this).val()!=='')
allSelected= false;
});
Ou, se você quiser usar a string vazia como um valor válido, basta examinar o índice da opção selecionada:
$('select').each(function() {
if (this.selectedIndex===0)
allSelected= false;
});
Você pode usar o : seletor selecionado por esta.
var unselected = []
$('select').each(function(){
if (0 == $(this).find('option:selected').length) {
unselected.push(this.id);
}
});
if (unselected.length != 0) {
// unselected contains the ids of non-selected select boxes
}
Ou você pode verificar seus valores com val (). Isso presume que você tem uma opção padrão sem valor (ou seja, um valor vazio da string).
var unselected = []
$('select').each(function(){
if ('' == $(this).val()) {
unselected.push(this.id);
}
});
if (unselected.length != 0) {
// unselected contains the ids of non-selected select boxes
}
function checkSelects() {
return $("select :selected").length == $("select").length;
}
alert(checkSelects());