Dapatkan nilai yang dipilih dalam daftar dropdown menggunakan JavaScript


1784

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;

Jawaban:


2928

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


13
@ R11G, gunakan onchange:)
AlexJaa

142
var strUser = e.options[e.selectedIndex].value;mengapa tidak sajavar strUser = e.value ?
The Red Pea

18
@ TheRedPea — mungkin karena ketika jawaban ini ditulis, ada kemungkinan (betapapun jauh) bahwa versi kuno Netscape Navigator perlu ditampung, jadi metode yang sama kuno untuk mengakses nilai dari satu pilihan digunakan. Tapi saya hanya menebak-nebak tentang itu. ;-)
RobG

12
Saya menggunakan seperti ini:var e = document.getElementById("ddlViewBy").value;
Fathur Rohim

3
seharusnya e.target.options[e.target.selectedIndex].texttidak tahu mengapa itu salah dalam semua jawaban di sini ..
OZZIE

373

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

1
Saya pasti melakukan sesuatu yang salah karena ketika saya mencoba ini saya mendapatkan kembali teks dari setiap opsi di drop down.
Kevin

6
Ini berhasil bagi saya dengan cara yang berbeda. $ ("# ddlViewBy: selected"). val () bukan tanpa yang dipilih
Ruwantha

1
element.options[e.selectedIndex].valuepastielement.options[element.selectedIndex].value
Christopher

Masih bermanfaat - terima kasih telah menuliskan variasi / bahasa! Sekarang jika saya hanya tahu yang setara untuk Dropdown Office JS API ...
Cindy Meister

seharusnya e.target.options[e.target.selectedIndex].texttidak tahu mengapa itu salah dalam semua jawaban di sini ..
OZZIE

174
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

1
saya pikir ".value" di javascript harus mengembalikan nilai untuk saya tetapi hanya ".text" akan kembali seperti apa .SelectedValue dalam asp.net kembali. Terima kasih misalnya diberikan!
Fire Hand

1
Yap - jadikan nilai opsi sama dengan apa adanya. Lebih sederhana - orang di atas perlu menulis lebih banyak kode untuk menggantikan ketidakjelasan awalnya.
Andrew Koper

seharusnya e.target.options[e.target.selectedIndex].texttidak tahu mengapa itu salah dalam semua jawaban di sini ..
OZZIE

62

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

Tautan Sumber

Bekerja Javascript & Demo jQuery

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

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

onchange=run(this.value)atau (this.text)bisa lebih menguntungkan.
Berci


22

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.


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


Penjelasan akan diurutkan.
Peter Mortensen

14

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;

Tidak berfungsi jika my_select_with_name_ddlViewBy adalah array seperti my_select_with_name_ddlViewBy []
zeuf

14

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'

12

Gunakan saja

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

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


5
Ini menggunakan jQuery, yang tidak menjawab pertanyaan OP.
David Meza

9

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.



7

Solusi lain adalah:

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

6

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.


Jawaban yang bagus untuk menunjukkan bagaimana kode perlu di-refresh setelah digunakan!
Pengguna yang bukan pengguna

5

Anda bisa menggunakannya querySelector.

Misalnya

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

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

5

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>


4

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.


3

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


OP mengatakan itu tidak bekerja untuk mereka: "Saya mencoba metode di bawah ini tetapi mereka semua mengembalikan indeks yang dipilih, bukan nilai: var as = document.form1.ddlViewBy.value;..."
Pengguna yang bukan pengguna

2

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/


1

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


1

Cara paling sederhana untuk melakukan ini adalah:

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

Dia ingin bukan nilai tetapi teks yang ditampilkan dari kotak pilih
Thanasis

0

Berikut cara mudah untuk melakukannya dalam fungsi onchange:

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


1
Berbicara tentang kesederhanaan, saya memikirkan ini alih-alih event.target
Christian Læirbag

0

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

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


Ini tidak berfungsi
Hujjat Nazari

-1

Mencoba

ddlViewBy.value                      // value

ddlViewBy.selectedOptions[0].text    // label


-1

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.