Событие изменения триггера <select> с помощью jquery

146

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

Также функция выполняется путем добавления триггера после привязки функции к событию.

Я пытался вывести что-то вроде этого

<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

— kishanio
источник

Вы хотите установить конкретную опцию при загрузке? или вы хотите активировать событие изменения?

— Manse

Не могли бы вы расширить на окончательное решение. Пытаетесь ли вы принудительно включить параметр при загрузке страницы или выберите другой параметр, если выбрано что-то конкретное?

— Мэтью Рич

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

— Кишанио

288

Используйте val()для изменения значения (не текста) и trigger()для ручного запуска события.

Обработчик события изменения должен быть объявлен перед триггером.

Вот образец

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

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

— Джозеф
источник

Также после изменения опции я хотел выполнить функцию события изменения. по этому поводу . окно оповещения должно быть выполнено.

— Кишанио

@KishanThobhani вы должны назвать это после добавления обработчика. посмотрите образец.

— Джозеф

7

Важной частью этого решения является: обработчик события изменения ДОЛЖЕН быть объявлен ДО триггера (имеет смысл ...), в моем случае это была проблема, спасибо!

— Ларзан

Это помогло как Спасителю, Спасибо @Joseph

— Divya

определил функцию изменения ДО того, как ты используешь, решил мою проблему. Спасибо.

— Kamlesh

28

Чтобы выбрать опцию, используйте .val('value-of-the-option')элемент select. Чтобы активировать элемент изменения, используйте .change()или .trigger('change').

Проблемы в вашем коде - это запятая, а не точка внутри, $('.check'),trigger('change');и тот факт, что вы вызываете ее перед привязкой обработчика событий.

— ThiefMaster
источник

10

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

Это изменит выпадающий элемент select html tag с помощью id="edit_user_details".

— Сохаил xIN3N
источник

7

Другое рабочее решение для тех, кто был заблокирован с помощью обработчика триггера jQuery, которое запускает огонь на нативных событиях, будет как ниже (100% работает):

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

— Mohamed23gharbi
источник

1

Я перепробовал все вышеперечисленное, но у меня работает только этот. Я думаю, потому что мой выбор был внутри vue. Спасибо @ Мохаммед23gharbi!

— Тиллито

1

Тоже самое. Это решение, которое я искал в течение часа. Спасибо.

— mberna

1

Это должно быть ответом!

— МАРС

1

Дайте ссылки в значении тега option

<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, это единственный способ, который работает.

— Tillito
источник

0

Вы можете попробовать код ниже, чтобы решить вашу проблему:

По умолчанию выбирается первая опция: jQuery ('. Select'). Find ('option') [0] .selected = true;

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

— Кетан Тамбекар
источник