Ben JavaScript ve jQuery bir acemi değilim. OnChange () üzerinde başka bir yerde <select>seçili idve içeriği olan bir HTML olan bir combobox-A göstermek istiyorum .

Seçim kutusuyla birlikte tam birleşik giriş idkutusunu nasıl iletebilirim ve onChange olayının yanmasıyla diğer parametreleri nasıl iletebilirim?

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>

Yukarıdaki örnek OnChange olayında açılan kutunun seçilen değerini alır .

Bazı durumlarda kullanışlı olabilecek başka bir yaklaşım, seçilen değerin <option />doğrudan aşağıdaki gibi işleve geçmesidir:

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>

JQuery'de nasıl yapılacağı için:

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

Javascript ve jQuery'nin aynı olmadığını da bilmelisiniz. jQuery geçerli bir JavaScript kodu, ancak tüm JavaScript jQuery değil. Farklılıkları aramalı ve uygun olanı kullandığınızdan emin olmalısınız.

JavaScript Çözümü

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

veya

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

veya

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

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

@ Piyush'ın cevabını yararlı buldum ve sadece eklemek için, programlı bir seçim oluşturursanız, bu davranışın belirgin olmayabileceği önemli bir yol var. Diyelim ki bir işleviniz var ve yeni bir seçim oluşturuyorsunuz:

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

Normal davranış

newSelect.onchange = changeitem;

Ancak bu, iletilen argümanı belirtmenize gerçekten izin vermez, bunun yerine bunu yapabilirsiniz:

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

Ve parametreyi ayarlayabilirsiniz. Bunu ilk şekilde yaparsanız, onchangeişlevinize alacağınız argüman tarayıcıya bağlı olacaktır. İkinci yol tarayıcılar arası gayet iyi çalışıyor.

jQuery çözümü

Seçilen bir seçeneğin metin değerini nasıl alırım

Seçili öğelerin genellikle erişmek istediğiniz iki değeri vardır.
İlk olarak sunucuya gönderilecek değer var , bu kolay:

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

İkincisi, seçimin metin değeridir .
Örneğin, aşağıdaki seçim kutusunu kullanarak:

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

İlk seçenek seçildiyse (yalnızca "1" yerine) "Bay" dizesini almak istiyorsanız, bunu şu şekilde yaparsınız:

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

Ayrıca bakınız

• .val () jQuery API Belgeleri

Bu bana yardımcı oldu.

Seçim için:

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

Radyo / onay kutusu için:

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

Feryat kodu deneyebilirsiniz

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

Ben sadece onChange olayı açıklamak için yazmak için yazdığınızda bu kodu html olarak kaydedebilir ve çalıştığı çıktı görmek ve sizin için anlamak kolay.

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

Birisinin ek bağımlılıkları indirmek zorunda kalmadan bir React çözümü araması durumunda yazabilirsiniz:

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

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

Yapıcıdaki değiştirilmiş () işlevini aşağıdaki gibi bağladığınızdan emin olun:

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

Bu benim için çalıştı onchange = setLocation($(this).val())

Buraya.

    @Html.DropDownList("Demo", 
new SelectList(ViewBag.locs, "Value", "Text"), 
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });