Использование JQuery для выбора выпадающего списка

Question

Я работаю над сайтом, на котором есть сценарий аренды оборудования, который использует выпадающий список для выбора категорий. http://www.thierryfun.be/indexV2.php

Клиент хочет, чтобы все категории дополнительно отображались в виде кнопок. Итак, я пытаюсь сделать нажатие на кнопку, как если бы пользователь выбрал опцию из раскрывающегося списка.

Я попытался связывая некоторые элементы с выпадающим меню:

$('.thirdButton').click(function() { 
    $("select[name='category_id']").eq(3).prop('selected', true); 
    $("select[name='category_id']").prop('selectedIndex', 3); 
    $("select[name='category_id']").val(3).change(); 
    $("option[value=3]").click(); 
    $("option[value=3]").triggerHandler("select"); 
    $("option[value=3]").trigger("click"); 
}); 

Однако все эти заявления не делает работу compleetly. Все они не могут действовать как фактический щелчок, который отправляет новый запрос на сервер. Как вы можете видеть в этом ролике 30 сек https://www.youtube.com/watch?v=mZz8xgc0ALY

Раскрывающийся оленья кожа на самом деле «совершить», «выполнить», чтобы сделать запрос на сервер.

Любые идеи, предложения очень ценятся!

Answer 1

Вот некоторые указатели:

• Вам не нужно, чтобы дать каждой кнопке уникальный класс. Используйте их относительное положение в группе кнопок, чтобы определить соответствующий option для выбора.
• $("select[name='category_id']").eq(3).prop('selected', true); не означает много; выбранное свойство принадлежит элементу option.
• После изменения выбранного option вы можете запустить событие change через метод .change().
• Либо используйте $(...option').eq(2).prop('selected', true') или $('select...').prop('selectedIndex', 2), но не оба.

Вот демо:

$(function() { 
 
    $('#mybuttons button').on('click', function() { 
 
    var index = $(this).index('#mybuttons button') + 1; 
 
    $('#myselect option').eq(index).prop('selected', true).parent().change(); 
 
    }); 
 
    $('#myselect').on('change', function() { 
 
    $('h3 strong').text('YES - ' + this.value); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="myselect"> 
 
    <option value="">select one</option> 
 
    <option>One</option> 
 
    <option>Two</option> 
 
    <option>Three</option> 
 
</select> 
 
<div id="mybuttons"> 
 
    <button>One</button> 
 
    <button>Two</button> 
 
    <button>Three</button> 
 
</div> 
 
<h3>Did Selects Change Event Trigger? <strong></strong></h3>

Answer 2

Проблема с событием .click() заключается в том, что вы должны объявить его после того, как .document равен .ready(), и он не будет работать, если элементы управления были созданы динамически после загрузки страницы. Я полагаю, что следует изменить первую строку:

$('.thirdButton').click(function() { 
    .... 
    ... 
    ... 
}); 

к

$(document).on('click','.thirdButton',function(){ 
    .... 
    ... 
    ... 
}); 

.on() работ без необходимости объявлять внутри .ready() и самое лучшее, он будет работать для обоих элементов управления, которые написаны в HTML или которые создаются динамически, когда страница живая. Попробуйте это:

$(document).on('click','.thirdButton',function(){ 
    $("select[name='category_id']").eq(3).prop('selected', true); 
    $("select[name='category_id']").prop('selectedIndex', 3); 
    $("select[name='category_id']").val(3).change(); 
    $("option[value=3]").click(); 
    $("option[value=3]").triggerHandler("select"); 
    $("option[value=3]").trigger("click"); 

});