Obter valor selecionado na lista suspensa usando JavaScript?

Como faço para obter o valor selecionado de uma lista suspensa usando JavaScript?

Eu tentei os methods abaixo, mas todos eles retornam o índice selecionado em vez do valor:

var as = document.form1.ddlViewBy.value; var e = document.getElementById("ddlViewBy"); var strUser = e.options[e.selectedIndex].value; var value = document.getElementById("ddlViewBy").value; 

   

Se você tem um elemento select que se parece com isso:

  

Executando este código:

 var e = document.getElementById("ddlViewBy"); var strUser = e.options[e.selectedIndex].value; 

Faria strUser ser 2 . Se o que você realmente quer é test2 , então faça o seguinte:

 var e = document.getElementById("ddlViewBy"); var strUser = e.options[e.selectedIndex].text; 

O que faria strUser ser test2

JavaScript simples:

 var e = document.getElementById("elementId"); var value = e.options[e.selectedIndex].value; var text = e.options[e.selectedIndex].text; 

jQuery:

 $("#elementId :selected").text(); // The text content of the selected option $("#elementId").val(); // The value of the selected option 

AngularJS : ( http://jsfiddle.net/qk5wwyct ):

 // HTML  

Text: {{selectItem.text}}

Value: {{selectItem.value}}

// JavaScript $scope.items = [{ value: 'item_1_id', text: 'Item 1' }, { value: 'item_2_id', text: 'Item 2' }];
 var strUser = e.options[e.selectedIndex].value; 

Isso está correto e deve lhe dar o valor. É o texto que você procura?

 var strUser = e.options[e.selectedIndex].text; 

Então você está claro na terminologia:

  

Esta opção tem:

  • Índice = 0
  • Valor = olá
  • Texto = Hello World

O código a seguir exibe vários exemplos relacionados à obtenção / colocação de valores de campos de input / seleção usando JavaScript.

Trabalhando DEMO

  

TextBox1

TextBox2

O script a seguir está recebendo o valor da opção selecionada e colocando-a na checkbox de texto 1

  

O script a seguir está obtendo um valor de uma checkbox de texto 2 e alertando com seu valor

  

O script a seguir está chamando uma function de uma function

  
 var selectedValue = document.getElementById("ddlViewBy").value; 

Se você alguma vez executar um código escrito exclusivamente para o IE, poderá ver isto:

 var e = document.getElementById("ddlViewBy"); var strUser = e.options(e.selectedIndex).value; 

Executando o acima em Firefox et al lhe dará um erro ‘não é uma function’ porque o IE permite que você se safar com using () em vez de []:

 var e = document.getElementById("ddlViewBy"); var strUser = e.options[e.selectedIndex].value; 

A maneira correta é usar colchetes.

Apenas use

  • $('#SelectBoxId option:selected').text(); para obter o texto listado

  • $('#SelectBoxId').val(); para obter o valor do índice selecionado

  

É provável que os principiantes desejem acessar valores de uma seleção com o atributo NAME, em vez do atributo ID. Sabemos que todos os elementos de formulário precisam de nomes, mesmo antes de receberem ids.

Então, estou adicionando a solução getElementByName() apenas para novos desenvolvedores verem também.

NB os nomes dos elementos de formulário precisarão ser exclusivos para que seu formulário seja utilizável depois de publicado, mas o DOM pode permitir que um nome seja compartilhado por mais de um elemento. Por essa razão, considere a adição de IDs a formulários, se puder, ou seja explícito com nomes de elementos de formulário my_nth_select_named_x e my_nth_text_input_named_y .

Exemplo usando getElementByName :

 var e = document.getElementByName("my_select_with_name_ddlViewBy"); var strUser = e.options[e.selectedIndex].value; 

As respostas anteriores ainda deixam espaço para melhorias devido às possibilidades, à intuição do código e ao uso de id versus name . Pode-se obter uma leitura de três dados de uma opção selecionada – seu número de índice, seu valor e seu texto. Esse código simples de navegador cruzado faz todos os três:

 < !DOCTYPE html>    Demo GetSelectOptionData   

 

 

 

Demonstração ao vivo: http://jsbin.com/jiwena/1/edit?html,output .

id deve ser usado para fins de maquiagem. Para fins de forma funcional, o name ainda é válido, também em HTML5, e ainda deve ser usado. Por fim, lembre-se do uso de colchetes quadrados em volta de certos lugares. Como foi explicado anteriormente, apenas (versões mais antigas) o IE aceitará as redondas em todos os lugares.

Consulte o artigo Selecionando o elemento dropdown usando JavaScript ou jQuery . Eles explicaram de muitas maneiras usando JavaScript e jQuery.

Usando jQuery:

 $('select').val(); 

Você pode usar o querySelector .

Por exemplo

 var myElement = document.getElementById('ddlViewBy'); var myValue = myElement.querySelector('[selected]').value; 

Em 2015, no Firefox , o seguinte também funciona.

e. opções .selectedIndex

Exemplo de funcionamento de como funciona:

 var e = document.getElementById("ddlViewBy"); var val1 = e.options[e.selectedIndex].value; var txt = e.options[e.selectedIndex].text; document.write("
Selected option Value: "+ val1); document.write("
Selected option Text: "+ txt);
  

Aqui está uma linha de código JavaScript:

 var x = document.form1.list.value; 

Supondo que o menu suspenso denominado list name="list" e incluído em um formulário com o nome do atributo name="form1" .

Para ir junto com as respostas acima, é assim que eu faço como um one-liner. Isso é para obter o texto real da opção selecionada. Existem bons exemplos para obter o número do índice já. (E para o texto, eu só queria mostrar isso)

 var selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text 

Em alguns casos raros, você pode precisar usar parênteses, mas isso seria muito raro.

 var selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text; 

Eu duvido que este processo seja mais rápido que a versão de duas linhas. Eu simplesmente gosto de consolidar meu código tanto quanto possível.

Se alguém souber como fazer isso em uma linha sem precisar obter o elemento duas vezes, eu adoraria que você comentasse e mostrasse como. Eu não fui capaz de descobrir isso ainda …

A única razão pela qual eu consigo ver que faz esse código não funcionar é se você está usando o IE7-, e esqueceu de especificar o atributo value para suas -tags … Todos os outros navegadores devem converter o que está dentro de tags open-close o valor da opção.

Outra solução é:

 document.getElementsById('elementId').selectedOptions[0].value 

Há duas maneiras de fazer isso usando JavaScript ou JQuery .

JavaScript:

 var getValue = document.getElementsById('ddlViewBy').selectedOptions[0].value; alert (getValue); // This will output the value selected. 

OU

 var ddlViewBy = document.getElementById('ddlViewBy'); var value = ddlViewBy.options[ddlViewBy.selectedIndex].value; var text = ddlViewBy.options[ddlViewBy.selectedIndex].text; alert (value); // this will output the value selected alert (text); // this will output the text of the value selected 

JQuery:

 $("#ddlViewBy:selected").text(); // Text of the selected value $("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy' 

Aqui está uma maneira fácil de fazer isso em uma function onchange:

event.target.options[event.target.selectedIndex].dataset.name