javascript - tag - select value html

É 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 obterem 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;

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 <option> -tags ... Todos os outros navegadores devem converter o que está dentro de tags open-close o valor da opção.

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

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

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

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

Usando jQuery:

$(‘select’).val();

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("<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 quando a lista suspensa é alterada, se você precisar dessa funcionalidade, uma mudança onClick deve ser implementada.

Há 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'

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

Sorurce Link

Demo Trabalho

 <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á recebendo o valor da opção selecionada e colocando-a 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>

Outra solução é:

document.getElementById('elementId').selectedOptions[0].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 função' 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.

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

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

Você pode usar o querySelector .

Por exemplo

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

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

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

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