Как связать несколько пар селектора: событие в методе jQuery ON

Question

Я использую jQuery 1.7+ последний .on метод, но не удалось реализовать, пожалуйста, помогите мне.

работает Fiddle.

в основном вот мой

HTML

<ul id="sortByRight" >
     <li id="1"><a href="javascript:void(0)">List</a></li>
     <li id="2"><a href="javascript:void(0)">Photo</a></li>
     <li id="3"><a href="javascript:void(0)">Map</a></li>
</ul>

<select name="sort" id="sort"  >
   <option value="1">Recommended</option>
   <option value="2">Price: low to high</option>
   <option value="3">Price: high to low </option>
   <option value="4">Newest</option>
</select>

jQuery код

$(document).on('change click', 'ul#sortByRight,select#sort', function() { 
               selectedOption = $('select#sort').val();
               whatToShow = $(this).attr('id');
               alert('selectedOption:'+selectedOption+'whatToShow:'+whatToShow);
              }
);

теперь у меня ниже проблемы / запросы.

• можем ли мы связать одно событие одним селектором, т. Е. Указанная выше функция должна называться
  EITHER on change of selectbox ИЛИ on click of ul.

• как установить data аргумент в методе .on.Я пробовал, как показано ниже

  $(document).on('change click', 'ul#sortByRight,select#sort',<br> { selectedOption : $('select#sort').val(), whatToShow : $(this).attr('id') } ,<br> function(){console.log('selectedOption:'+selectedOption+'whatToShow:'+whatToShow);}<br> );

  , но получаю ошибку, что selectedOption is not defined.

• мы можем написать что-то вроде этого $(this, li);, потому чтоМне нужен идентификатор li , а не идентификатор selectbox .

• , если есть какое-либо другое оптимизированное решение (с использованием такой функции, как liveили bind), тогда, пожалуйста, скажите мне.

Большое спасибо.

Answer 1

Я не на 100% понимаю, что вы на самом деле хотите сделать, но одна вещь не имеет особого смысла.Вы хотите отправить идентификатор LI при изменении поля выбора.Какой LI?Последний LI нажал?Вам нужно сохранить состояние активного LI, чтобы вы могли отправить его в запросе ajax, если поле выбора изменилось.

Возможно что-то вроде этого:

$('select#sort').change(function() {
    processAjax();
});


$('ul#sortByRight > li > a').click(function() {
    $(this).closest('ul').find('li').removeClass('active');
    $(this).closest('li').addClass('active');

    processAjax();
});

function processAjax() {
    selectedOption = $('select#sort').val();
    whatToShow = $('ul#sortByRight').find('.active').attr('id');
    alert('selectedOption:' + selectedOption + 'whatToShow:' + whatToShow);
}

или проверьте jsFiddle