Jak przekazać parametry na onChange z html select

198

Jestem nowicjuszem w JavaScript i jQuery. Chcę pokazać jeden combobox-A, który jest HTML <select>z zaznaczoną idzawartością i zawartością w innym miejscu onChange ().

Jak mogę przekazać kompletny zestaw combobox z jego wyborem idi jak przekazać inne parametry w przypadku zdarzenia onChange?

Gendaful
źródło
5
czy możesz napisać kod?
KJYe.Name 葉家仁

Odpowiedzi:

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>

Powyższy przykład pokazuje wybraną wartość pola kombi w zdarzeniu OnChange .

Piyush Mattoo
źródło
Dzięki, to zadziałało dla mnie. Zasadniczo chcę pokazać ten sam combobox w innym miejscu, więc dałem 2 różne identyfikatory dla 2 comboboxów. Czy i tak mogę pokazać ten sam combobox w innym miejscu. Każda pomoc będzie mile widziana.
Gendaful
13
Bardziej zwięzłym sposobem odzyskania wartości getComboA()jestvar value = sel.value;
Yony,
4
Zdarzenie zmiany zostanie uruchomione tylko wtedy, gdy pole wyboru straci fokus. Czy istnieje sposób na uruchomienie zdarzenia natychmiast po zmianie wartości?
doABarrelRoll721
2
zamiast tego użyj this.value, a to zadziała =) wysyłanie to wysyła cały wybrany element
Colin Rickels
W moim przypadku kod działa w przeglądarce Firefox, ale nie w Chrome.
avijit bhattacharjee
50

Innym podejściem, które może się przydać w niektórych sytuacjach, jest przekazanie wartości wybranej <option />bezpośrednio do funkcji w następujący sposób:

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>

Cazuma Nii Cavalcanti
źródło
1
Właśnie tego potrzebowałem. Miałem już funkcję javascript, która zmieniała kolor obrazu po kliknięciu próbek kolorów. Ale miał prośbę, aby działał również w rozwijanych opcjach wyboru PayPal. Użyłem tego, ale zamiast używać „wartości” (ponieważ potrzebowałem jej dla Paypal) dodałem „etykietę” do każdej opcji z nazwami zmiennych, których użyłem do zmiany zdjęć. Działa idealnie! Dzięki!!
FlashNoob468
5
To jest miłe. Inną prostszą i poprawną opcją jest: <wybierz onChange = "myFunction (this.value)">
Daniel Silva
1
Przydatny, aby uzyskać dostęp do innych atrybutów wybranej opcji.
Cees Timmerman
31

Aby to zrobić w 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>

Powinieneś także wiedzieć, że JavaScript i jQuery nie są identyczne. jQuery jest poprawnym kodem JavaScript, ale nie wszystkie JavaScript to jQuery. Powinieneś sprawdzić różnice i upewnić się, że używasz odpowiedniej.

aiham
źródło
2
Próbowałem tego, ale funkcja zmiany nie jest wywoływana, nawet jeśli wstawię metodę document.ready. Mój kod to htmlData.push ('<select id = "choose" name = "choose">'); $ („# select”). change (function () {alert („zmiana nazywana”); alert („Opcja z wartością” + $ (this) .value () + ”i tekst„ + $ (this). tekst () + „został wybrany.”); Proszę, pomóżcie mi z tym.
Gendaful
@Gendaful: htmlData.push($('<select id="choose" name="choose">'));należy wykonać lewę (wcześniej wypchnąłeś ciąg zamiast pełnoprawnego węzła). > 6 lat minęło ...
Johannes
6

Rozwiązanie 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>

lub

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

lub

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

 function handleChange(evt){
    var value = evt.target.value;
 };
</script>
RobertKim
źródło
Jest to najbardziej ogólne i kompleksowe rozwiązanie tutaj. Dzięki!
divs1210
5

Uznałem, że odpowiedź @ Piyush jest pomocna i po prostu dodajmy do niej, jeśli programowo tworzysz selekcję, istnieje ważny sposób na uzyskanie tego zachowania, które może nie być oczywiste. Załóżmy, że masz funkcję i tworzysz nowy wybór:

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

Można powiedzieć normalne zachowanie

newSelect.onchange = changeitem;

Ale tak naprawdę nie pozwala ci podać tego argumentu, więc zamiast tego możesz to zrobić:

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

I możesz ustawić parametr. Jeśli zrobisz to w pierwszy sposób, argument, który dostaniesz do swojej onchangefunkcji, będzie zależał od przeglądarki. Drugi sposób wydaje się działać dobrze w różnych przeglądarkach.

Michael Plautz
źródło
1
Twoja evalpodobna do zła konwersja łańcucha na kod nie jest konieczna. Właściwie newSelect.onchange = changeitem;działa dobrze, jeśli przepiszesz changeitem jako var changeitem = function () {console.log(this.selectedIndex); };(tj. Używając thiszamiast argumentu funkcji). Lub zostaw changeitemjak jest i napisz newSelect.onchange = function () {changeitem(this); };.
Steve Byrnes,
1
newSelect.setAttribute („onchange”, „changeitem (this)”); - na zdrowie
ghosh
5

Rozwiązanie jQuery

Jak uzyskać wartość tekstową wybranej opcji

Wybierz elementy zwykle mają dwie wartości , do których chcesz uzyskać dostęp.
Najpierw jest wartość, którą należy wysłać na serwer, co jest łatwe:

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

Drugi to wartość tekstowa zaznaczenia.
Na przykład za pomocą następującego pola wyboru:

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

Jeśli chcesz uzyskać ciąg „Mr”, jeśli wybrano pierwszą opcję (zamiast tylko „1”), zrobiłbyś to w następujący sposób:

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

Zobacz też

Aniket Kulkarni
źródło
5

To mi pomogło.

Do wyboru:

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

Dla radia / pola wyboru:

$('radio_tags').on('change', function() {
    alert( $(this).find(":checked").val() );
});
ilgam
źródło
3

Możesz wypróbować poniższy kod

<select onchange="myfunction($(this).val())" id="myId">
    </select>
feyyaz acet
źródło
1

ten kod raz piszę dla wyjaśnienia zdarzenia onChange wybranego możesz zapisać ten kod jako HTML i zobaczyć, jak działa. i łatwy do zrozumienia dla ciebie.

<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>
Piyush
źródło
1

Na wypadek, gdyby ktoś szukał rozwiązania React bez konieczności pobierania zależności dodawania, możesz napisać:

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

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

Pamiętaj, aby powiązać zmienioną funkcję () w konstruktorze, np .:

this.changed = this.changed.bind(this);
RawBData
źródło
0

To działało dla mnie onchange = setLocation($(this).val())

Tutaj.

    @Html.DropDownList("Demo", 
new SelectList(ViewBag.locs, "Value", "Text"), 
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });
Deepak Singla
źródło