Как передать параметры по onChange html select - PullRequest
Новая
       88

Как передать параметры по onChange html select

167 голосов
/ 17 февраля 2011

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

Как передать полный комбинированный список с его выбором id и как передать другие параметры при возникновении события onChange?

Ответы [ 11 ]

315 голосов
/ 17 февраля 2011 
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 .

42 голосов
/ 12 апреля 2013

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

<select onChange="myFunction(this.options[this.selectedIndex].value)">
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
</select>
31 голосов
/ 17 февраля 2011

Как это сделать в 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.Вы должны посмотреть на различия и убедиться, что используете подходящую.

5 голосов
/ 02 января 2014

Решение 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"

Смотри также

5 голосов
/ 13 февраля 2013

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

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 функции, будет зависеть от браузера. Второй способ, кажется, работает кросс-браузер просто отлично.

4 голосов
/ 09 апреля 2015

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

Для выбора: 

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

Для радио / флажок: 

$('radio_tags').on('change', function() {
    alert( $(this).find(":checked").val() );
});
3 голосов
/ 25 февраля 2015

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

<select onchange="myfunction($(this).val())" id="myId">
    </select>
2 голосов
/ 28 февраля 2019

JavaScript Solution 

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

или 

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

или 

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

 function handleChange(evt){
    var value = evt.target.value;
 };
</script>
1 голос
/ 31 марта 2013

этот код, как только я напишу для объяснения события выбора onChange, вы можете сохранить этот код в виде 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 голосов
/ 24 октября 2018

Это сработало для меня onchange = "setLocation ($ (this) .val ())"

Здесь ..

@Html.DropDownList ("Демо", новый SelectList (ViewBag.locs, "Значение", "Текст"), новый {Class = "ddlStyle", onchange = "setLocation ($ (this) .val ()) "});

Страница:
...