Как передать параметры на onChange, после HTML-кода выберите

Я новичок в JavaScript и jQuery. Я хочу показать один combobox-A, который является HTML <select> с выбранного id и содержимое в другом месте на onChange ().



как я могу передать полный combobox с его select id, и как я могу передать другие параметры при пожаре события onChange?

687   9  

9 ответов:

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>

в приведенном выше примере вы получаете выбранное значение поля со списком на OnChange событие.

282  
2017-01-17 22:20:39

другой подход, который может быть удобен в некоторых ситуациях, является передача значения выбранного <option /> непосредственно к функции, как это:

<select onChange="myFunction(this.options[this.selectedIndex].value)">
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
</select>
37  
2018-05-04 17:13:44

Как это сделать в 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>

вы также должны знать, что JavaScript и jQuery не идентичны. jQuery-это допустимый код JavaScript, но не все JavaScript-это jQuery. Вы должны посмотреть различия и убедитесь, что вы используете соответствующий.

28  
2015-11-30 21:33:50

Я нашел ответ @Piyush полезным, и просто добавить к нему, если вы программно создаете select, то есть важный способ получить это поведение, которое может быть не очевидным. Допустим, у вас есть функция и вы создаете новый select:

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

нормальное поведение может быть сказать

newSelect.onchange = changeitem;

но на самом деле это не позволяет вам указать этот аргумент, поэтому вместо этого вы можете сделать следующее:

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

и вы можете установить параметр. Если вы сделаете это первым способом, то аргумент вы получите на свой onchange функция будет зависеть от браузера. Второй способ, кажется, работает кросс-браузер просто отлично.

5  
2013-07-24 05:40:06

решение jQuery

как получить текстовое значение выбранного параметра

выберите элементы, как правило, имеют два значения что вы хотите получить доступ.
Во-первых, это стоимостью для отправки на сервер, что легко:

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

второй -текст выбрать.
Например, используя следующее поле выбора:

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

если вы хотели получить строка " Mr "если был выбран первый вариант (вместо просто" 1"), Вы бы сделали это следующим образом: 

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

см. также

4  
2014-01-02 08:04:18

вы можете попробовать ниже код 

<select onchange="myfunction($(this).val())" id="myId">
    </select>
3  
2015-02-25 17:21:22

это помогло мне.

для выберите:

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

переключатель радио/:

$('radio_tags').on('change', function() {
    alert( $(this).find(":checked").val() );
});
3  
2015-04-09 15:21:02

этот код, как только я пишу для просто объяснить onChange событие select вы можете сохранить этот код в виде html и посмотреть вывод он работает.и легко понять, для вас.

<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  
2013-03-31 12:44:53

выберите новый автомобиль из списка. При выборе нового автомобиля запускается функция, которая выводит значение выбранного автомобиля.

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

массив JavaScript, для каждого цикла и onChange выберите

<!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  
2017-07-07 15:53:48

Comments

    Ничего не найдено.
Click here to cancel reply.