Событие изменения триггера в раскрывающемся списке


86

Я хочу вызвать событие изменения раскрывающегося списка в $ (document) .ready с помощью jquery.

У меня есть каскадный раскрывающийся список для страны и штата на странице сведений о пользователе. как я могу установить значение (которое берется из БД на основе идентификатора пользователя) для страны и штата в MVC с C #.


Возможно, вы захотите добавить еще несколько тегов, таких как javascript и jQuery, чтобы узнать об этом больше
xenon

Ответы:


185

Я не знаю столько JQuery, но слышал, что он позволяет запускать собственные события с этим синтаксисом.

$(document).ready(function(){

    $('#countrylist').change(function(e){
       // Your event handler
    });

    // And now fire change event when the DOM is ready
    $('#countrylist').trigger('change');
});

Вы должны объявить обработчик события изменения перед вызовом trigger () или change (), иначе он не будет запущен. Спасибо за упоминание @LenielMacaferi.

Больше информации здесь .


13
Вы должны объявить обработчик события изменения перед вызовом trigger()или даже так, change()как правильно показано в этом ответе, то есть, если код обработчика событий появляется под вызовом, ничего не происходит! :)
Leniel Maccaferri

3
@LenielMacaferi Спасибо, что сэкономили мне час или два.
Frank Nocke

@Christophe Eblé и Leniel Macaferi, большое спасибо. Кристоф, не могли бы вы добавить комментарий Ленила к своему ответу?
Zaxter

Я использовал .change (), но не повезло с jquery 3.1.1, после этого сообщения он запускается, как ожидалось.
Сорангвала Аббасали

Это просто заканчивается бесконечным зацикливанием, все решения этого заканчиваются зацикливанием.
Nathan McKaskle

12

Попробуй это:

$(document).ready(function(event) {
    $('#countrylist').change(function(e){
         // put code here
     }).change();
});

Определите событие изменения и немедленно активируйте его. Это гарантирует, что обработчик событий определен перед его вызовом.

Возможно, будет поздно ответить на исходный постер, но кто-то другой может извлечь выгоду из сокращенной записи, и это следует за цепочкой jQuery и т. Д.

цепочка jquery


7

Попробуй это:

$('#id').change();

Работает для меня.

В одной строке вместе с установкой значения: $('#id').val(16).change();


3
$ ('# идентификатор'). val (16) .change (); сделал это для меня.
TomoMiha

1
Спасибо, @TomoMiha. Добавил в ответ.
d.popov

2

Если вы пытаетесь связать раскрывающиеся списки, лучший способ сделать это - иметь сценарий, который возвращает предварительно созданное поле выбора и вызов AJAX, который его запрашивает.

Вот документация по методу JQuery Ajax, если он вам нужен.

$(document).ready(function(){

    $('#countrylist').change(function(e){
        $this = $(e.target);
        $.ajax({
            type: "POST",
            url: "scriptname.asp", // Don't know asp/asp.net at all so you will have to do this bit
            data: { country: $this.val() },
            success:function(data){
                $('#stateBoxHook').html(data);
            }
        });
    });

});

Затем выделите поле выбора состояния с идентификатором «stateBoxHook».


У меня есть каскадные раскрывающиеся списки: <% = Html.DropDownList ("MyCountries", "--- Выберите страну ---")%> <% = Html.CascadingDropDownList ("MyStates", "MyCountries")%> Я могу установить значение MyCountries как $ ("# MyCountries"). val ('<% = Model.CountryId%>'); в $ (документ) .ready. Но я не могу установить значение для состояния, поскольку он показывает только одну опцию «Выбрать состояние», которая должна быть заполнена при событии изменения страны, поскольку они являются каскадными раскрывающимися списками. Это актуальный вопрос.
Прасад

Все еще не уверен, что вам нужно. Вы пытаетесь создать систему, при которой они выбирают страну и сужают список до штатов в этой стране? В этом случае вам нужно будет выполнить вызов AJAX на сервер и отправить из выбранной страны, а затем вернуть список штатов в этой стране.
xenon

Я установил США как страну и Алабаму как штат, что является каскадным раскрывающимся списком при добавлении профиля пользователя. И когда я вернусь на эту страницу, чтобы отредактировать поле, мне нужно, чтобы Страна и Штат были заполнены значениями, которые я установил ранее. У меня нет проблем с добавлением профиля пользователя, когда я возвращаюсь на страницу для редактирования, я могу установить значение для раскрывающегося списка Страна, а в раскрывающемся списке состояния значения не заполняются, поскольку он каскадный, который заполняется значением страны изменить событие. Для этого мне нужно вызвать событие изменения страны, чтобы состояние было заполнено, и я мог установить состояние
Прасад

Почему это так? Вы знаете, какая страна находится во время загрузки страницы, поэтому вы можете отобразить правильный список выбранных состояний с правильным выбранным состоянием. При изменении страны список все равно будет перезагружен.
xenon

1

в качестве альтернативы вы можете поместить атрибут onchange в сам выпадающий список, чтобы onchange вызывал определенную функцию jquery, подобную этой.

<input type="dropdownlist" onchange="jqueryFunc()">

<script type="text/javascript">
$(function(){
    jqueryFunc(){
        //something goes here
    }
});
</script>

Надеюсь, это поможет вам, и обратите внимание, что этот код - это всего лишь черновик, не проверенный ни на одном ide. Благодарность


Это не вызывает событие изменения при первой загрузке страницы (согласно вопросу OP)

0

По какой-то причине другие jQueryрешения, представленные здесь, работали при запуске скрипта с консоли, однако у меня это не сработало при запуске из Chrome Bookmarklets .

К счастью, это решение Vanilla JS ( triggerChangeEventфункция) сработало:

/**
  * Trigger a `change` event on given drop down option element.
  * WARNING: only works if not already selected.
  * @see /programming/902212/trigger-change-event-of-dropdown/58579258#58579258
  */
function triggerChangeEvent(option) {
  // set selected property
  option.selected = true;
  
  // raise event on parent <select> element
  if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    option.parentNode.dispatchEvent(evt);
  }
  else {
    option.parentNode.fireEvent("onchange");
  }
}

// ################################################
// Setup our test case
// ################################################

(function setup() {
  const sel = document.querySelector('#fruit');
  sel.onchange = () => {
    document.querySelector('#result').textContent = sel.value;
  };
})();

function runTest() {
  const sel = document.querySelector('#selector').value;
  const optionEl = document.querySelector(sel);
  triggerChangeEvent(optionEl);
}
<select id="fruit">
  <option value="">(select a fruit)</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="pineapple">Pineapple</option>
</select>

<p>
  You have selected: <b id="result"></b>
</p>
<p>
  <input id="selector" placeholder="selector" value="option[value='banana']">
  <button onclick="runTest()">Trigger select!</button>
</p>

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.