Neste artigo, aprenderemos como obter os valores selecionados na lista suspensa com a ajuda do jQuery. Em primeiro lugar, entenderemos este artigo usando jQuery, seletor de jQuery e método jQuery val(). Depois disso, entenderemos este tópico com a ajuda de vários exemplos.
O que você quer dizer com jQuery?
jQuery é uma biblioteca JavaScript rápida, leve, pequena e rica em recursos.
tipos de rede
Utilize o jQuery: seletor selecionado em combinação com o método val () para encontrar o valor da opção selecionada em uma lista suspensa.
O seletor em jQuery:
É um elemento HTML no qual a declaração é aplicada.
Por exemplo: selecionado, verificado, etc.
Selecionado é usado para especificar a escolha padrão quando o formulário é carregado inicialmente.
Método val () em jQuery:
Este método é usado para obter os valores dos elementos do formulário ou definir o valor do atributo usado para os elementos selecionados.
Sintaxe:
$(selector).val ();
Exemplo:
$('input: text').val ('javaTpoint!');
Lista suspensa com e tag.
As tags select e option são usadas para criar menus suspensos. Eles permitem que o usuário selecione opções únicas ou múltiplas em uma lista de opções. Todas as opções não são mostradas na tela, mas ficam visíveis quando puxam a lista suspensa. Eles são usados para economizar espaço, pois apenas um item da lista é exibido.
Para criar listas suspensas, tag é usada em vez de tag . A tag emparelhada começa com a tag de abertura e termina com a tag de fechamento. Esta tag deve ser usada com a tag .
Sintaxe:
hospedeiro linux
Text Label-1 Text Label-2 ………………………………………………………………………………………………….. …………………………………………………………………………………………………..
Os vários atributos usados com a tag são:
Os vários atributos usados com tag são:
Os exemplos a seguir são usados para obter o valor selecionado na lista suspensa em jQuery.
Exemplo 1:
Como obter o valor selecionado na lista suspensa em jQuery.
Get Selected Value in drop-down using jQuery h1 { color: green; } h5 { color: green; } h4 { color: green; } p { color: red; } .select { margin: 40px; width: 60%; height: 300px; padding: 30px; border: 2px solid green; } body { background-color: pink; } $(document).ready (function () { $('select.country').change (function () { var selectedCountry = $(this).children('option:selected').val(); alert ('You have selected the country - ' + selectedCountry); }); }); <p> <b> Get Selected Value in drop-down using jQuery </b> </p> <h4> Select Country from drop-down list: </h4> <br> United States India United Kingdom Brazil Germany <br> <br> <b> Get selected values from list </b>
Explicação:
No exemplo acima, criamos uma lista suspensa com a ajuda de e tag. Neste, se selecionarmos um valor múltiplo da lista e criarmos um após selecionar o elemento múltiplo da lista e clicar em um botão, ele exibe uma mensagem de alerta com o elemento selecionado na lista suspensa.
mostrar aos usuários mysql
United States India United Kingdom Brazil Germany <br> <br> <b> Get selected values from list </b>
Aqui,
Size ='3' é usado para exibir o número de elementos mostrados na lista suspensa, multiple é usado para selecionar vários valores na lista suspensa.
Saída:
A saída deste exemplo é fornecida abaixo.