Parametreleri açık olarak nasıl değiştirilir?


198

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?


5
biraz kod gönderebilir misin lütfen?
KJYe.Name葉家仁

Yanıtlar:


372

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 .


Teşekkürler, bu benim için çalıştı. Temelde aynı yerde farklı combobox göstermek istiyorum, bu yüzden 2 combobox için 2 farklı id verdi.Neyse orada, ben farklı yerde aynı combobox gösterebilir. Herhangi bir yardım büyük takdir edilecektir.
Gendaful

13
Değer içini almak için daha sözün yolu getComboA()olduğunuvar value = sel.value;
Yony

4
Change olayı yalnızca seçim kutusu odağı kaybederse tetiklenir. Bir değer değiştikten hemen sonra olayı tetiklemenin bir yolu var mı?
doABarrelRoll721

2
Bunun yerine this.value kullanın ve işe yarayacak =) bu gönderme tüm seçme elemanını gönderiyor
Colin Rickels

Benim durumumda, kod Firefox'ta çalışıyor, ancak Chrome'da çalışmıyor.
avijit bhattacharjee

50

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>


1
Tam da ihtiyacım olan buydu. Renk örneklerini tıklarken renk resimlerini değiştiren bir javascript işlevi zaten vardı. Ancak, PayPal açılır menü seçenekleri üzerinde de çalışması için bir istek vardı. Bunu kullandım ama 'değer' kullanmak yerine (Paypal için ihtiyacım olduğu için) Her seçeneğe resimleri değiştirmek için kullandığım değişken adları ile bir 'etiket' ekledim. Mükemmel çalıştı! Teşekkürler!!
FlashNoob468

5
Bu güzel. Başka bir daha basit geçerli bir seçenek: <select onChange = "myFunction (this.value)">
Daniel Silva

1
Seçilen seçeneğin diğer özelliklerine erişmek için kullanışlıdır.
Cees Timmerman

31

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.


2
Bunu denedim, ancak document.ready yöntemini koysam bile değişiklik işlevi çağrılmıyor. Kodum htmlData.push ('<select id = "select" name = "select">'); $ ('# select'). change (function () {alert ('change call' '); alert (' '+ $ (this) .value () +' ve metin '+ $ (this) değerine sahip seçenek. text () + 'seçildi.'); Lütfen bana bu konuda yardımcı olun
Gendaful

@Gendaful: htmlData.push($('<select id="choose" name="choose">'));hile yapmalı (daha önce tam gelişmiş bir düğüm yerine bir dize ittiniz ). > 6 yıl geçti ...
Johannes

6

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>

Bu, buradaki en genel ve kapsamlı çözümdür. Teşekkürler!
divs1210

5

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


1
Kötülük evalbenzeri dize-kod dönüştürmeniz gerekli değildir. Aslında newSelect.onchange = changeitem;changeitem'i yeniden yazarsanız iyi çalışır var changeitem = function () {console.log(this.selectedIndex); };(yani thisişlev bağımsız değişkeni yerine kullanarak ). Ya changeitemda olduğu gibi bırakın ve yazın newSelect.onchange = function () {changeitem(this); };.
Steve Byrnes

1
newSelect.setAttribute ('onchange', 'changeitem (this)'); - Şerefe
ghosh

5

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


5

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

3

Feryat kodu deneyebilirsiniz

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

1

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>

1

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

0

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())" });
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.