Dapatkan nilai yang dipilih dalam daftar dropdown menggunakan JavaScript

Bagaimana cara saya mendapatkan nilai yang dipilih dari daftar dropdown menggunakan JavaScript?

Saya mencoba metode di bawah ini, tetapi semuanya mengembalikan indeks yang dipilih alih-alih nilainya:

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

Jika Anda memiliki elemen pilih yang terlihat seperti ini:

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

Menjalankan kode ini:

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

Akan strUsermenjadi 2. Jika yang Anda inginkan sebenarnya test2, lakukan ini:

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

Yang akan strUsermenjaditest2

JavaScript Biasa:

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;

Ini benar dan harus memberi Anda nilai. Apakah itu teks yang Anda cari?

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

Jadi Anda jelas tentang terminologinya:

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

Opsi ini memiliki:

• Indeks = 0
• Nilai = halo
• Text = Hello World

Kode berikut menunjukkan berbagai contoh yang terkait dengan mendapatkan / menempatkan nilai dari bidang input / pilih menggunakan JavaScript.

Tautan Sumber

Bekerja Javascript & Demo jQuery

 <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()">

Script berikut mendapatkan nilai dari opsi yang dipilih dan meletakkannya di kotak teks 1

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

Script berikut mendapatkan nilai dari kotak teks 2 dan mengingatkan dengan nilainya

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

Skrip berikut memanggil fungsi dari suatu fungsi

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

Jika Anda pernah menemukan kode yang ditulis murni untuk Internet Explorer, Anda mungkin melihat ini:

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

Menjalankan hal di atas dalam Firefox et al akan memberi Anda kesalahan 'bukan fungsi', karena Internet Explorer memungkinkan Anda untuk menggunakan () alih-alih []:

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

Cara yang benar adalah dengan menggunakan tanda kurung siku.

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

Bidang input / formulir apa pun dapat menggunakan kata kunci "ini" saat Anda mengaksesnya dari dalam elemen. Ini menghilangkan kebutuhan untuk menemukan formulir di pohon dom dan kemudian menemukan elemen ini di dalam formulir.

Pemula cenderung ingin mengakses nilai dari yang dipilih dengan atribut NAME daripada atribut ID. Kita tahu semua elemen bentuk memerlukan nama, bahkan sebelum mereka mendapatkan id.

Jadi, saya menambahkan getElementByName()solusinya hanya untuk dilihat oleh pengembang baru juga.

NB. nama untuk elemen formulir harus unik agar formulir Anda dapat digunakan setelah diposkan, tetapi DOM dapat memungkinkan nama dibagikan oleh lebih dari satu elemen. Untuk alasan itu pertimbangkan untuk menambahkan ID ke formulir jika Anda bisa, atau secara eksplisit dengan nama elemen formulirmy_nth_select_named_x danmy_nth_text_input_named_y .

Contoh menggunakan getElementByName:

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

Ada dua cara untuk menyelesaikan ini baik menggunakan JavaScript atau jQuery.

JavaScript:

var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;

alert (getValue); // This will output the value selected.

ATAU

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'

Gunakan saja

• $('#SelectBoxId option:selected').text(); untuk mendapatkan teks seperti yang tercantum

• $('#SelectBoxId').val(); untuk mendapatkan nilai indeks yang dipilih

Jawaban sebelumnya masih menyisakan ruang untuk perbaikan karena kemungkinan, intuitif kode, dan penggunaan idversus name. Seseorang dapat membaca tiga data dari opsi yang dipilih - nomor indeksnya, nilainya dan teksnya. Kode lintas-browser yang sederhana ini melakukan ketiganya:

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

Demo langsung: http://jsbin.com/jiwena/1/edit?html,output .

idharus digunakan untuk keperluan make-up. Untuk keperluan bentuk fungsional, namemasih valid, juga dalam HTML5, dan masih harus digunakan. Terakhir, perhatikan penggunaan kurung siku versus bundar di tempat-tempat tertentu. Seperti yang telah dijelaskan sebelumnya, hanya Internet Explorer versi lama yang akan menerima yang bundar di semua tempat.

Menggunakan jQuery:

$('select').val();

Solusi lain adalah:

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

Menjalankan contoh cara kerjanya:

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>

Catatan: Nilai-nilai tidak berubah karena dropdown diubah, jika Anda memerlukan fungsionalitas itu maka perubahan onClick akan diterapkan.

Anda bisa menggunakannya querySelector.

Misalnya

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

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

Saya memiliki pandangan yang sedikit berbeda tentang cara mencapai ini. Saya biasanya melakukan ini dengan pendekatan berikut (ini adalah cara yang lebih mudah dan bekerja dengan setiap browser sejauh yang saya tahu):

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

Pada 2015, di Firefox , berikut ini juga berfungsi.

e. Pilihan .selectedIndex

Agar sesuai dengan jawaban sebelumnya, ini adalah bagaimana saya melakukannya sebagai satu-baris. Ini untuk mendapatkan teks aktual dari opsi yang dipilih. Ada beberapa contoh bagus untuk mendapatkan nomor indeks. (Dan untuk teksnya, saya hanya ingin menunjukkan cara ini)

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

Dalam beberapa kasus yang jarang terjadi, Anda mungkin perlu menggunakan tanda kurung, tetapi ini akan sangat jarang.

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

Saya ragu proses ini lebih cepat dari versi dua baris. Saya hanya ingin menggabungkan kode saya sebanyak mungkin.

Sayangnya ini masih mengambil elemen dua kali, yang tidak ideal. Metode yang hanya mengambil elemen sekali saja akan lebih bermanfaat, tetapi saya belum menemukan jawabannya, dalam hal melakukan ini dengan satu baris kode.

Ini adalah baris kode JavaScript:

var x = document.form1.list.value;

Dengan asumsi bahwa menu dropdown bernama daftar name="list"dan dimasukkan dalam formulir dengan atribut nama name="form1".

Anda harus menggunakan querySelectoruntuk mencapai ini. Ini juga menstandarkan cara mendapatkan nilai dari elemen formulir.

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

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

Saya tidak tahu apakah saya orang yang tidak menjawab pertanyaan dengan benar, tetapi ini hanya berfungsi untuk saya: Menggunakan acara onchange () di html Anda, mis.

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

Ini akan memberi Anda nilai apa pun pada dropdown pilih per klik

Cara paling sederhana untuk melakukan ini adalah:

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

Berikut cara mudah untuk melakukannya dalam fungsi onchange:

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

Kerjakan saja: document.getElementById('idselect').options.selectedIndex

Maka Anda saya akan mendapatkan nilai indeks pilih, mulai dari 0.

Mencoba

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>

Buat menu drop-down dengan beberapa opsi (Sebanyak yang Anda inginkan!)

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

Saya membuat sedikit lucu. Berikut cuplikan kode:

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