Cara menyampaikan parameter pada onChange of html select


198

Saya seorang pemula di JavaScript dan jQuery. Saya ingin menunjukkan satu combobox-A, yang merupakan HTML <select>dengan konten yang dipilih iddan di tempat lain di onChange ().

Bagaimana saya bisa melewati kotak kombo lengkap dengan idpilihnya, dan bagaimana saya bisa melewatkan parameter lain di api acara onChange?


5
dapatkah Anda memposting beberapa kode?
KJYe.Name 葉家仁

Jawaban:


371

function getComboA(selectObject) {
  var value = selectObject.value;  
  console.log(value);
}
<select id="comboA" onchange="getComboA(this)">
  <option value="">Select combo</option>
  <option value="Value1">Text1</option>
  <option value="Value2">Text2</option>
  <option value="Value3">Text3</option>
</select>

Contoh di atas memberi Anda nilai kotak kombo yang dipilih pada acara OnChange .


Terima kasih, ini berhasil bagi saya. Pada dasarnya saya ingin menampilkan kotak kombo yang sama di tempat yang berbeda, jadi saya memberikan 2 kotak berbeda ke 2 kotak kombo. Apakah ada di sana, bahwa saya dapat menampilkan kotak kombo yang sama di tempat yang berbeda. Bantuan apa pun akan sangat dihargai.
Gendaful

13
Cara yang lebih ringkas untuk mengambil nilai di dalamnya getComboA() adalahvar value = sel.value;
Yony

4
Acara perubahan diaktifkan hanya jika kotak pilih kehilangan fokus. Apakah ada cara untuk memecat acara segera setelah nilai berubah?
doABarrelRoll721

2
gunakan this.value sebagai gantinya dan itu akan bekerja =) mengirim ini mengirim seluruh elemen pilih
Colin Rickels

Untuk kasus saya, kode berfungsi di Firefox tetapi tidak di Chrome.
avijit bhattacharjee

50

Pendekatan lain yang dapat berguna dalam beberapa situasi, adalah meneruskan nilai yang dipilih <option />langsung ke fungsi seperti ini:

function myFunction(chosen) {
  console.log(chosen);
}
<select onChange="myFunction(this.options[this.selectedIndex].value)">
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
</select>


1
Inilah yang saya butuhkan. Sudah memiliki fungsi javascript yang mengubah gambar warna ketika mengklik contoh warna. Tetapi ada permintaan agar bisa bekerja pada opsi pilih tarik turun PayPal juga. Menggunakan ini tetapi alih-alih menggunakan 'nilai' (karena saya membutuhkannya untuk Paypal) saya menambahkan 'label' untuk setiap opsi dengan nama variabel yang saya gunakan untuk mengubah gambar. Bekerja dengan sempurna! Terima kasih!!
FlashNoob468

5
Ini bagus. Pilihan lain yang lebih sederhana dan valid adalah: <select onChange = "myFunction (this.value)">
Daniel Silva

1
Berguna untuk mengakses atribut lain dari opsi yang dipilih.
Cees Timmerman

31

Untuk cara melakukannya di jQuery:

<select id="yourid">
<option value="Value 1">Text 1</option>
<option value="Value 2">Text 2</option>
</select>

<script src="jquery.js"></script>
<script>
$('#yourid').change(function() {
  alert('The option with value ' + $(this).val() + ' and text ' + $(this).text() + ' was selected.');
});
</script>

Anda juga harus tahu bahwa Javascript dan jQuery tidak identik. jQuery adalah kode JavaScript yang valid, tetapi tidak semua JavaScript adalah jQuery. Anda harus melihat perbedaannya dan memastikan Anda menggunakan yang sesuai.


2
Saya mencoba ini, tetapi fungsi perubahan tidak dipanggil bahkan jika saya memasukkan metode document.ready. Kode saya adalah htmlData.push ('<select id = "select" name = "select">'); $ ('# select'). change (function () {alert ('change called'); alert ('Opsi dengan nilai' + $ (this) .value () + 'dan teks' + $ (ini). teks () + 'dipilih.'); Tolong bantu saya dengan ini.
Gendaful

@ Gendaful: htmlData.push($('<select id="choose" name="choose">'));harus melakukan trik (Anda mendorong string alih-alih simpul penuh sebelumnya). > 6 tahun berlalu ...
Johannes

6

Solusi JavaScript

<select id="comboA">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
<script>
 document.getElementById("comboA").onchange = function(){
    var value = document.getElementById("comboA").value;
 };
</script>

atau

<script>
 document.getElementById("comboA").onchange = function(evt){
    var value = evt.target.value;
 };
</script>

atau

<script>
 document.getElementById("comboA").onchange = handleChange;

 function handleChange(evt){
    var value = evt.target.value;
 };
</script>

Ini adalah solusi paling umum dan komprehensif di sini. Terima kasih!
divs1210

5

Saya menemukan jawaban @ Piyush bermanfaat, dan hanya untuk menambahkannya, jika Anda secara terprogram membuat pilih, maka ada cara penting untuk mendapatkan perilaku ini yang mungkin tidak jelas. Katakanlah Anda memiliki fungsi dan Anda membuat pilih baru:

var changeitem = function (sel) {
  console.log(sel.selectedIndex);
}
var newSelect = document.createElement('select');
newSelect.id = 'newselect';

Perilaku normal bisa dikatakan

newSelect.onchange = changeitem;

Tetapi ini tidak benar-benar memungkinkan Anda untuk menentukan argumen yang diteruskan, jadi Anda dapat melakukan ini:

newSelect.setAttribute('onchange', 'changeitem(this)');

Dan Anda dapat mengatur parameter. Jika Anda melakukannya dengan cara pertama, maka argumen yang akan Anda peroleh untuk onchangefungsi Anda akan tergantung pada browser. Cara kedua tampaknya berfungsi lintas browser dengan baik.


1
evalKonversi string-ke-kode jahat Anda tidak perlu. Sebenarnya newSelect.onchange = changeitem;berfungsi dengan baik jika Anda menulis ulang changeitem sebagai var changeitem = function () {console.log(this.selectedIndex); };(yaitu menggunakan thisalih-alih argumen fungsi). Atau, biarkan changeitemapa adanya dan tulis newSelect.onchange = function () {changeitem(this); };.
Steve Byrnes

1
newSelect.setAttribute ('onchange', 'changeitem (this)'); - tepuk tangan untuk itu
ghosh

5

solusi jQuery

Bagaimana cara mendapatkan nilai teks dari opsi yang dipilih

Elemen tertentu biasanya memiliki dua nilai yang ingin Anda akses.
Pertama, ada nilai yang akan dikirim ke server, yang mudah:

$( "#myselect" ).val();
// => 1

Yang kedua adalah nilai teks dari pilih.
Misalnya, menggunakan kotak pilih berikut:

<select id="myselect">
  <option value="1">Mr</option>
  <option value="2">Mrs</option>
  <option value="3">Ms</option>
  <option value="4">Dr</option>
  <option value="5">Prof</option>
</select>

Jika Anda ingin mendapatkan string "Mr" jika opsi pertama dipilih (bukan hanya "1"), Anda akan melakukannya dengan cara berikut:

$( "#myselect option:selected" ).text();
// => "Mr"  

Lihat juga


5

Ini membantu saya.

Untuk pilih:

$('select_tags').on('change', function() {
    alert( $(this).find(":selected").val() );
});

Untuk radio / kotak centang:

$('radio_tags').on('change', function() {
    alert( $(this).find(":checked").val() );
});

3

Anda dapat mencoba kode di bawah ini

<select onchange="myfunction($(this).val())" id="myId">
    </select>

1

kode ini setelah saya tulis untuk menjelaskan acara onChange pilih Anda dapat menyimpan kode ini sebagai html dan lihat hasilnya berfungsi. dan mudah dimengerti untuk Anda.

<html>
    <head>
        <title>Register</title>
    </head>
    <body>
    <script>
        function show(){
            var option = document.getElementById("category").value;
            if(option == "Student")
                  {
                        document.getElementById("enroll1").style.display="block";
                  }
            if(option == "Parents")
                  {
                        document.getElementById("enroll1").style.display="none";
                  }
            if(option == "Guardians")
                  {
                        document.getElementById("enroll1").style.display="none";
                  }
        }
    </script>
            <form action="#" method="post">
                <table>
                    <tr>
                        <td><label>Name </label></td>
                        <td><input type="text" id="name" size=20 maxlength=20 value=""></td>
                    </tr>
                    <tr style="display:block;" id="enroll1">
                        <td><label>Enrollment No. </label></td>
                        <td><input type="number" id="enroll" style="display:block;" size=20 maxlength=12 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Email </label></td>
                        <td><input type="email" id="emailadd" size=20 maxlength=25 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Mobile No. </label></td>
                        <td><input type="number" id="mobile" size=20 maxlength=10 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Address</label></td>
                        <td><textarea rows="2" cols="20"></textarea></td>
                    </tr>
                    <tr >
                        <td><label>Category</label></td>
                        <td><select id="category" onchange="show()">    <!--onchange show methos is call-->
                                <option value="Student">Student</option>
                                <option value="Parents">Parents</option>
                                <option value="Guardians">Guardians</option>
                            </select>
                        </td>
                    </tr>
                </table><br/>
            <input type="submit" value="Sign Up">
        </form>
    </body>
</html>

1

Untuk berjaga-jaga jika seseorang mencari solusi Bereaksi tanpa harus mengunduh ketergantungan tambahan Anda dapat menulis:

<select onChange={this.changed(this)}>
   <option value="Apple">Apple</option>
   <option value="Android">Android</option>                
</select>

changed(){
  return e => {
    console.log(e.target.value)
  }
}

Pastikan untuk mengikat fungsi yang diubah () di konstruktor seperti:

this.changed = this.changed.bind(this);

0

Ini berfungsi untuk saya onchange = setLocation($(this).val())

Sini.

    @Html.DropDownList("Demo", 
new SelectList(ViewBag.locs, "Value", "Text"), 
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });
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.