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?

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 .

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>

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.

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>

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.

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

• .val () Dokumentasi API jQuery

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

Anda dapat mencoba kode di bawah ini

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

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>

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

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