Pertanyaan Dapatkan nilai yang dipilih dalam daftar dropdown menggunakan JavaScript?


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

Saya mencoba metode di bawah tetapi semuanya mengembalikan indeks yang dipilih alih-alih nilai:

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

1370
2017-07-06 07:25


asal


Jawaban:


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 membuat strUser menjadi 2. Jika apa yang sebenarnya Anda inginkan adalah test2, lalu lakukan ini:

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

Yang akan membuat strUser menjadi test2


2330
2017-07-06 07:29



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

280
2017-12-18 02:08



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

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

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

Jadi Anda jelas tentang terminologi:

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

Opsi ini memiliki:

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

155
2017-07-06 07:29



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

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

Skrip berikut ini mendapatkan nilai dari opsi yang dipilih dan memasukkannya ke dalam kotak teks 1

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

Skrip berikut ini mendapatkan nilai dari kotak teks 2 dan memperingatkan 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>

47
2017-12-03 06:50



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

21
2017-10-25 13:27



Jika Anda pernah menjalankan kode yang ditulis murni untuk IE Anda mungkin melihat ini:

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

Menjalankan di atas di Firefox dkk akan memberi Anda kesalahan 'bukan fungsi' karena IE memungkinkan Anda untuk lolos menggunakan () daripada []:

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

Cara yang benar adalah menggunakan tanda kurung siku.


18
2018-06-18 15:28



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

12
2018-04-14 13:45



Cukup gunakan

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

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


11
2018-02-18 11:01



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

Jadi, saya menambahkan getElementByName() solusi hanya untuk pengembang baru untuk melihat juga.

NB. nama untuk elemen formulir harus unik agar formulir Anda dapat digunakan setelah diposting, tetapi DOM dapat memungkinkan nama dibagikan oleh lebih dari satu elemen. Karena itu pertimbangkan untuk menambahkan ID ke formulir jika Anda bisa, atau eksplisit dengan nama elemen formulir my_nth_select_named_x dan my_nth_text_input_named_y.

Contoh menggunakan getElementByName:

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

11
2018-03-09 03:32