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

198

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

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

Gendaful
источник
5
Можете ли вы опубликовать код пожалуйста?
KJYe.Name 葉家仁

Ответы:

373

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>

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

Пиюш Матту
источник
Спасибо, это сработало для меня. По сути, я хочу показать один и тот же комбинированный список в разных местах, поэтому я дал два разных идентификатора двум комбинированным спискам. Так или иначе, я могу показать один и тот же комбинированный список в разных местах. Любая помощь будет оценена.
Gendaful
13
Более сжатый способ получить внутреннюю стоимость getComboA()составляетvar value = sel.value;
Yony
4
Событие изменения срабатывает только в том случае, если поле выбора теряет фокус. Есть ли способ вызвать событие сразу после изменения значения?
doABarrelRoll721
2
используйте вместо этого this.value, и оно будет работать =) отправка отправляет весь элемент select
Colin Rickels,
В моем случае код работает на Firefox, но не на Chrome.
авиджит бхаттачарджи
50

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

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
Это было именно то, что мне было нужно. У меня уже была функция javascript, которая меняла цветовые картинки при нажатии на образцы цветов. Но был запрос, чтобы он работал на выпадающих опциях выбора PayPal. Использовал это, но вместо использования «value» (так как мне это было нужно для Paypal) я добавил «label» к каждой опции с именами переменных, которые я использовал для изменения изображений. Работал отлично! Спасибо!!
FlashNoob468
5
Это хорошо. Еще один более простой допустимый вариант: <select onChange = "myFunction (this.value)">
Даниэль Сильва,
1
Полезно для доступа к другим атрибутам выбранной опции.
Сис Тиммерман
31

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

aiham
источник
2
Я пытался это сделать, но функция изменения не вызывается, даже если я добавляю метод document.ready. Мой код htmlData.push ('<select id = "Choose" name = "Choose">'); $ ('# select'). change (function () {alert ('change selected'); alert ('Опция со значением' + $ (this) .value () + 'и text' + $ (this). text () + 'было выбрано.'); Пожалуйста, помогите мне с этим.
Gendaful
@Gendaful: htmlData.push($('<select id="choose" name="choose">'));нужно сделать свое дело (вы нажали строку вместо полноценного узла раньше). > Прошло 6 лет ...
Йоханнес
6

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

или

<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>
RobertKim
источник
Это самое общее и всеобъемлющее решение здесь. Спасибо!
divs1210
5

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

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

Майкл Плаутц
источник
1
Ваше зло- evalподобное преобразование строки в код не нужно. На самом деле newSelect.onchange = changeitem;работает нормально, если вы переписываете changeitem как var changeitem = function () {console.log(this.selectedIndex); };(т.е. используете thisвместо аргумента функции). Или оставь changeitemкак есть и пиши newSelect.onchange = function () {changeitem(this); };.
Стив Бирнс
1
newSelect.setAttribute ('onchange', 'changeitem (this)'); - ура за это
Гош
5

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

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

Для выбора:

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

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

$('radio_tags').on('change', function() {
    alert( $(this).find(":checked").val() );
});
Ильгам
источник
3

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

<select onchange="myfunction($(this).val())" id="myId">
    </select>
фейяз ацет
источник
1

этот код, как только я напишу для объяснения события выбора 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>
Piyush
источник
1

На всякий случай, если кто-то ищет решение React без необходимости загружать дополнительные зависимости, вы можете написать:

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

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

Убедитесь, что привязали функцию updated () в конструкторе, например:

this.changed = this.changed.bind(this);
RawBData
источник
0

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

Вот.

    @Html.DropDownList("Demo", 
new SelectList(ViewBag.locs, "Value", "Text"), 
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });
Дипак Сингла
источник