Як передавати параметри onChange html select


198

Я новачок у JavaScript та jQuery. Я хочу показати один комбобокс-A, який представляє собою HTML <select>із вибраним idта вмістом в іншому місці onChange ().

Як я можу передати повну комбіновану скриньку з її вибором id, і як я можу передавати інші параметри під час події onChange?


5
ви можете опублікувати якийсь код, будь ласка?
KJYe.Name 葉家仁

Відповіді:


372

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 .


Дякую, це спрацювало для мене. В основному я хочу показати один і той же комбобокс в іншому місці, тому я дав 2 різних ідентифікатори на 2 combobox.Як там все одно, що я можу показати один і той же комбобокс в іншому місці. Будь-яка допомога буде дуже вдячна.
Чіткий

13
Більш стислий спосіб отримати внутрішню вартість getComboA()становитьvar value = sel.value;
Yony

4
Подія зміни запускається, лише якщо поле вибору втрачає фокус. Чи є спосіб запустити подію відразу після зміни значення?
doABarrelRoll721

2
використовуйте це.значення замість цього, і воно спрацює =) надсилаючи це,
висилаєте

У моєму випадку код працює на Firefox, але не на Chrome.
avijit bhattacharjee

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)">
Daniel Silva

1
Корисно для доступу до інших атрибутів вибраного параметра.
Cees Timmerman

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. Ви повинні знайти відмінності та переконатися, що ви використовуєте відповідну.


2
Я спробував це, але функція зміни не викликається, навіть якщо я застосував метод document.ready. Мій код - htmlData.push ('<select id = "select" name = "select">'); $ ('# select'). change (функція () {alert ('зміна викликається'); alert ('Опція зі значенням' + $ (this) .value () + 'та text' + $ (this). text () + 'було вибрано.'); Будь ласка, допоможіть мені у цьому.
Четвертий

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

Це найбільш загальне і всебічне рішення тут. Дякую!
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() );
});


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>

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

Переконайтеся, що пов’язана змінена () функція в конструкторі:

this.changed = this.changed.bind(this);

0

Це працювало для мене onchange = setLocation($(this).val())

Ось

    @Html.DropDownList("Demo", 
new SelectList(ViewBag.locs, "Value", "Text"), 
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.