Obter valor selecionado na lista suspensa usando JavaScript

Como obtenho o valor selecionado em uma lista suspensa usando JavaScript?

Eu tentei os métodos 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;

Se você tiver um elemento de seleção parecido com este:

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

Executando este código:

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

Faria strUserser 2. Se o que você realmente deseja é test2, faça o seguinte:

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

O que tornaria strUsersertest2

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 :selected").val(); // The value of the selected option

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

// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>

// 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 fornecer o valor. É o texto que você procura?

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

Então você está claro na terminologia:

<select>
    <option value="hello">Hello World</option>
</select>

Esta opção possui:

• Índice = 0
• Valor = olá
• Texto = Olá Mundo

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

Link de origem

Trabalhando Javascript e jQuery Demo

 <select id="Ultra" onchange="run()">  <!--Call run() function-->
     <option value="0">Select</option>
     <option value="8">text1</option>
     <option value="5">text2</option>
     <option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt"  placeholder="Write Something !" onkeyup="up()">

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

<script>
    function run() {
        document.getElementById("srt").value = document.getElementById("Ultra").value;
    }
</script>

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

<script>
    function up() {
        //if (document.getElementById("srt").value != "") {
            var dop = document.getElementById("srt").value;
        //}
        alert(dop);
    }
</script>

O script a seguir está chamando uma função de uma função

<script>
    function up() {
        var dop = document.getElementById("srt").value;
        pop(dop); // Calling function pop
    }

    function pop(val) {
        alert(val);
    }?
</script>

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

Se você encontrar um código escrito exclusivamente para o Internet Explorer, poderá ver o seguinte:

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

A execução do procedimento acima no Firefox et al dará a você um erro 'não é uma função', porque o Internet Explorer permite que você use () em vez de []:

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

A maneira correta é usar colchetes.

<select id="Ultra" onchange="alert(this.value)"> 
 <option value="0">Select</option>
 <option value="8">text1</option>
 <option value="5">text2</option>
 <option value="4">text3</option>
</select>

Qualquer campo de entrada / formulário pode usar uma palavra-chave "this" quando você a estiver acessando de dentro do elemento. Isso elimina a necessidade de localizar um formulário na árvore dom e, em seguida, localizar esse elemento dentro do formulário.

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

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

NB os nomes dos elementos do formulário precisarão ser exclusivos para que seu formulário possa ser usado depois de publicado, mas o DOM pode permitir que um nome seja compartilhado por mais de um elemento. Por esse motivo, considere adicionar IDs aos formulários, se puder, ou seja explícito com os nomes dos elementos do formulário my_nth_select_named_xe 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;

Existem duas maneiras de fazer isso usando JavaScript ou jQuery.

JavaScript:

var getValue = document.getElementById('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'

Apenas use

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

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

As respostas anteriores ainda deixam espaço para melhorias devido às possibilidades, à intuitividade do código e ao uso de idversus 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 para vários navegadores faz os três:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo GetSelectOptionData</title>
</head>
<body>
    <form name="demoForm">
        <select name="demoSelect" onchange="showData()">
            <option value="zilch">Select:</option>
            <option value="A">Option 1</option>
            <option value="B">Option 2</option>
            <option value="C">Option 3</option>
        </select>
    </form>

    <p id="firstP">&nbsp;</p>
    <p id="secondP">&nbsp;</p>
    <p id="thirdP">&nbsp;</p>

    <script>
    function showData() {
        var theSelect = demoForm.demoSelect;
        var firstP = document.getElementById('firstP');
        var secondP = document.getElementById('secondP');
        var thirdP = document.getElementById('thirdP');
        firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
        secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
        thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
    }
     </script>
</body>
</html>

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

iddeve ser usado para fins de maquiagem. Para fins de formulário funcional, nameainda é válido, também em HTML5, e ainda deve ser usado. Por fim, lembre-se do uso de colchetes quadrados versus redondos em determinados lugares. Como foi explicado anteriormente, apenas as versões mais antigas do Internet Explorer aceitam versões arredondadas em todos os lugares.

Usando jQuery:

$('select').val();

Outra solução é:

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

Exemplo de execução de como funciona:

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

document.write("<br />Selected option Value: "+ val1);
document.write("<br />Selected option Text: "+ txt);

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3"  selected="selected">test3</option>
</select>

Nota: Os valores não mudam conforme a lista suspensa é alterada, se você precisar dessa funcionalidade, uma alteração onClick deve ser implementada.

Você pode usar querySelector .

Por exemplo

var myElement = document.getElementById('ddlViewBy');

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

Eu tenho uma visão um pouco diferente de como conseguir isso. Normalmente, faço isso com a seguinte abordagem (é uma maneira mais fácil e funciona com todos os navegadores, tanto quanto eu sei):

<select onChange="functionToCall(this.value);" id="ddlViewBy">
  <option value="value1">Text one</option>
  <option value="value2">Text two</option>
  <option value="value3">Text three</option>
  <option value="valueN">Text N</option>
</select>

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

e opções .selectedIndex

Para acompanhar as respostas anteriores, é assim que eu faço isso como uma linha. Isto é 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 dessa maneira)

let 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.

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

Duvido que esse processo seja mais rápido que a versão de duas linhas. Eu simplesmente gosto de consolidar meu código o máximo possível.

Infelizmente, isso ainda busca o elemento duas vezes, o que não é o ideal. Um método que apenas agarra o elemento uma vez seria mais útil, mas ainda não o descobri no que diz respeito a fazer isso com uma linha de código.

Aqui está uma linha de código JavaScript:

var x = document.form1.list.value;

Supondo que o menu suspenso name="list"nomeie a lista e inclua em um formulário com o atributo name name="form1".

Você deve estar usando querySelectorpara conseguir isso. Isso também padroniza a maneira de obter valor dos elementos do formulário.

var dropDownValue = document.querySelector('#ddlViewBy').value;

Fiddle: https://jsfiddle.net/3t80pubr/

Não sei se sou eu quem não responde corretamente à pergunta, mas isso só funcionou para mim: Usar um evento onchange () no seu html, por exemplo.

<select id="numberToSelect" onchange="selectNum">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

// javascript

function sele(){
    var strUser = numberToSelect.value;
}

Isso fornecerá qualquer valor na lista suspensa por clique

A maneira mais simples de fazer isso é:

var value = document.getElementById("selectId").value;

Aqui está uma maneira fácil de fazer isso em uma função onchange:

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

Apenas faça: document.getElementById('idselect').options.selectedIndex

Então você receberá o valor do índice selecionado, começando em 0.

Tentar

ddlViewBy.value                      // value

ddlViewBy.selectedOptions[0].text    // label

console.log( ddlViewBy.value );

console.log( ddlViewBy.selectedOptions[0].text );

<select id="ddlViewBy">
  <option value="1">Happy</option>
  <option value="2">Tree</option>
  <option value="3"  selected="selected">Friends</option>
</select>

Faça um menu suspenso com várias opções (quantas você quiser!)

<select>
  <option value="giveItAName">Give it a name
  <option value="bananaShark">Ridiculous animal
  <ooption value="Unknown">Give more options!
</select>

Eu fiquei um pouco hilário. Aqui está o trecho de código:

<select>
  <option value="RidiculousObject">Banana Shark
  <option value="SuperDuperCoding">select tag and option tag!
  <option value="Unknown">Add more tags to add more options!
</select>
<h1>Only 1 option (Useless)</h1>
<select>
  <option value="Single">Single Option
</select>  

yay o trecho funcionou