Jak przekazać parametry na onChange of html select

Question

Jak przekazać parametry na onChange of html select

Jestem nowicjuszem w JavaScript i jQuery. Chcę pokazać jeden combobox-A, który jest HTML {[0] } z jego wybraną id i zawartością w drugim miejscu na onChange ().

Jak przekazać kompletny combobox z jego select id i jak przekazać inne parametry podczas pożaru zdarzenia onChange?

143

javascript jquery html combobox onchange

Author: Mark, 2011-02-17

Source

9 answers

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

<select onChange="myFunction(this.options[this.selectedIndex].value)">
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
</select>

37

Author: Cazuma Nii Cavalcanti,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-04 14:13:44

Jak 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 poprawny kod JavaScript, ale nie wszystkie JavaScript jest jQuery. Powinieneś sprawdzić różnice i upewnić się, że używasz odpowiedniego.

28

Author: aiham,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-30 19:33:50

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

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

Normalne zachowanie można powiedzieć

newSelect.onchange = changeitem;

Ale to tak naprawdę nie pozwala Ci określić przekazanego 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, następnie argument, który otrzymasz do funkcji onchange będzie zależny od przeglądarki. Drugi sposób wydaje się działać między przeglądarkami.

5

Author: Michael Plautz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-24 02:40:06

JQuery solution

Jak uzyskać wartość tekstową wybranej opcji

Wybrane elementy zazwyczaj mają dwie wartości, do których chcesz uzyskać dostęp.
Najpierw jest wartość do wysłania na serwer, co jest łatwe:

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

Drugi to wartość tekstowa select.
Na przykład, używając 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 pierwsza opcja została wybrana (zamiast tylko "1") zrobiłbyś to w następujący sposób:

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

Zobacz też

.val () dokumentacja jQuery API

4

Author: Aniket Kulkarni,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-02 06:04:18

Możesz spróbować poniżej kodu

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

3

Author: feyyaz acet,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-25 15:21:22

To mi pomaga.

Dla wyboru:

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

Dla radia / checkbox:

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

3

Author: ilgam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-09 12:21:02

Ten kod kiedy napiszę dla just explain onChange event of select możesz zapisać ten kod jako html i zobaczyć wyjście to działa.i łatwe 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>

0

Author: Piyush,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-31 09:44:53

Wybierz nowy samochód z listy. Po wybraniu nowego samochodu uruchamiana jest funkcja, która wyświetla wartość wybranego samochodu.

<!DOCTYPE html>
<html>
	
  <body>

    <select id="mySelect" onchange="myFunction(this)">
      <option value="Audi">Audi
      <option value="BMW">BMW
      <option value="Mercedes">Mercedes
      <option value="Volvo">Volvo
    </select>

    <p id="demo"></p>

    <script>
      function myFunction(selectObject) {
        var x = selectObject.value;
        document.getElementById("demo").innerHTML = "You selected: " + x;
      }
    </script>

  </body>
	
</html>

W3school onChange

Tablica JavaScript, dla każdej pętli i onChange Select

<!DOCTYPE html>
<html>
	
  <body>
			
    <p id="select"></p>			

    <script>
					
      var txt = "";
      var person = {id1:"John", id2:"Doe", id3:"John Doe"}; 
      var x;
					
      text   = "<select id='mySelect' onchange='myFunction()'>";					
					
      for (x in person) {

        text += "<option value='" + x + "'>" + person[x] + "</option>";				
							
      }
					
      text += "</select>";
					
      document.getElementById("select").innerHTML = text;
					
    </script>
			
    <p id="text"></p>			

    <script>
      function myFunction() {
        var x = document.getElementById("mySelect").value;							
        document.getElementById("text").innerHTML = "You selected: " + x + " as value";
      }
    </script>			

  </body>
	
</html>

-1

Author: antelove,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-07 12:53:48

score 282 · Accepted Answer

function getComboA(selectObject) {
    var value = selectObject.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 pobiera wybraną wartość pola kombi w zdarzeniu OnChange.