Запуск зміни події <select> за допомогою jquery

145

Чи все-таки я можу викликати подію зміни у вікні вибору на завантаженні сторінки та вибрати певний варіант.

Також функція виконується додаванням тригера після прив’язки функції до події.

Я намагався виводити що - щось на зразок цього

<select class="check">
<option value="one">one</option>
<option value="two">two</option>
</select>

$(function(){
    $('.check').trigger('change'); //This event will fire the change event. 
    $('.check').change(function(){
      var data= $(this).val();
      alert(data);            
    });
});

http://jsfiddle.net/v7QWd/1/

jquery

— кишаніо
джерело

Ви хочете встановити певну опцію для завантаження? чи ти хочеш викликати зміну?

— Мансе

Чи можете ви розширити остаточне рішення. Ви намагаєтесь мати примусовий варіант, коли сторінка завантажується, або виберіть інший варіант, коли вибрано щось конкретне?

— Меттью Річ

привіт, дякую за Ваш відгук, я зміг вирішити проблему і задокументував її.

— кишаніо

287

Використовуйте, val()щоб змінити значення (а не текст) та trigger()вручну запустити подію.

Обробник події зміни повинен бути оголошений перед тригером.

Ось зразок

$('.check').change(function(){
  var data= $(this).val();
  alert(data);            
});

$('.check')
    .val('two')
    .trigger('change');

— Йосип
джерело

Також після зміни параметра я хотів виконати функцію зміни події. wrt це . Поле попередження повинно виконуватись.

— кишаніо

@KishanThobhani вам слід зателефонувати після додавання обробника. див. зразок.

— Йосиф

7

Важливою частиною цього рішення є: Обробник події зміни ОБОВ'ЯЗКОВО бути оголошений перед тригером (має сенс ...), в моєму випадку це була проблема, дякую!

— Ларзан

Це допомогло Спасителем, спасибі @ Джозеф

— Дивья

визначена функція зміни перед тим, як ви користуєтесь, вирішила мою проблему. Дякую.

— Kamlesh

27

Щоб вибрати варіант, скористайтеся .val('value-of-the-option')елементом вибору. Щоб запустити елемент зміни, використовуйте .change()або .trigger('change').

Проблеми у вашому коді - це кома, а не крапка, $('.check'),trigger('change');і те, що ви викликаєте її перед прив’язкою обробника події.

— ThiefMaster
джерело

10

$('#edit_user_details').find('select').trigger('change');

Це дозволить змінити пункт, що випадає, тег html, що випадає id="edit_user_details".

— Покриття xIN3N
джерело

6

Ще одне робоче рішення для тих, хто був заблокований обробкою тригерів jQuery, що дозування на рідні події буде, як нижче (100% працює):

var sortBySelect = document.querySelector("select.your-class"); 
sortBySelect.value = "new value"; 
sortBySelect.dispatchEvent(new Event("change"));

— Мохамед23гарбі
джерело

1

Я спробував усе вищесказане, але тільки для мене це працює. Я думаю, тому що мій вибір був усередині vue. Дякую @ Mohamed23gharbi!

— Тілліто

1

Те ж саме. Це рішення, яке я шукав протягом години. Дякую.

— мберна

1

Це має бути відповіддю!

— MARS

1

Надайте посилання у значенні опції тегу

<select size="1" name="links" onchange="window.location.href=this.value;">
   <option value="http://www.google.com">Google</option>
   <option value="http://www.yahoo.com">Yahoo</option>
</select>

— Афраз Ахмад
джерело

1

Якщо ви хочете зробити кілька перевірок, використовуйте цей спосіб

 <select size="1" name="links" onchange="functionToTriggerClick(this.value)">
    <option value="">Select a Search Engine</option>        
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
</select>

<script>

   function functionToTriggerClick(link) {

     if(link != ''){
        window.location.href=link;
        }
    }  

</script>

— Афраз Ахмад
джерело

0

На основі відповіді Мохамеда23гарбі:

function change(selector, value) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.value = value;
    sortBySelect.dispatchEvent(new Event("change"));
}

function click(selector) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.dispatchEvent(new Event("click"));
}

function test() {
    change("select#MySelect", 19);
    click("button#MyButton");
    click("a#MyLink");
}

У моєму випадку, коли елементи були створені vue, це єдиний спосіб, який працює.

— Тілліто
джерело

0

Ви можете спробувати нижче код, щоб вирішити свою проблему:

За замовчуванням виберіть перший варіант: jQuery ('. Select'). Find ('option') [0] .selected = true;

Спасибі, Кетан Т

— Кетан Тамбекар
джерело