2015-03-23 3 views
1

Ребята, я хочу спросить, как я могу сделать функцию в jQuery, когда я нажимаю кнопку, чтобы вызвать выбор опции в меню выбора.jQuery - на кнопке выбора триггера кнопки выбора

Вот мой HTML код:

<select id="target_menu" name="sort_by"> 
    <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option> 
    <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option> 
    <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option> 
    <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option> 
    <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option> 
</select> 

Вариант, который я хочу быть запущен, как выбран created_at.

Вот код кнопки, что я хочу, когда она нажата, чтобы выбрать параметр с идентификатором created_at в меню выбора с идентификатором target_menu:

<button onclick="triggerChange()" class="FirstFilter"> 
    Click me! 
</button> 

Когда я нажимаю на кнопку ->Click Me! я хочу JQuery для принудительного/запуска выбора опции с идентификатором created_at в меню выбора с идентификатором target_menu.

Как должна выглядеть моя функция triggerChange()?

Итак, ребята, как я могу это сделать?

+0

http://stackoverflow.com/questions/4680075/set-selected-option-of-select-box – errand

ответ

3

Попробуйте эту функцию:

function triggerChange(){ 
     $("#target_menu").val($("#target_menu #created_at").val()); 
     $('#target_menu').trigger('change'); 
    } 
+0

Окей, но это изменить, и выберите опцию с идентификатором 'created_at' ? –

+0

Я обновил ан. в соответствии с вашими требованиями –

+0

То, что вы написали, работает только тогда, когда вы вручную меняете элемент выбора, и независимо от того, какой пользователь выберет его, он выберет опцию с идентификатором 'created_at'. Он хотел установить «created_at» в качестве выбранного параметра при нажатии кнопки. Как ваш ответ помогает ему? – Kosmog

-1

Я сделал эту скрипку для вас

Fiddle

Первый шаг, чтобы получить значение из элемента с идентификатором created_at:

var wantedValue= $('#created_at').attr('value'); 

И Затем вам нужно установить выбранные значение для выбора элемента:

$('#target_menu').val(wantedValue).trigger('change'); // need to call .trigger('change') here 
// you can also call .trigger() - without 'change' keyword 

Объяснения о том, почему вам нужно вызвать .changeHERE

Для полого выбора, флажков и переключателей, событие срабатывает сразу, когда пользователь делает выбор с помощью мыши, но для другие типы элементов событие отложено до тех пор, пока элемент не теряет фокус.

Update (спасибо LShetty)

$('.FirstFilter').click(function(){ 
     $("#position").removeAttr("selected"); 
     $("#created_at").attr('selected','selected'); 
    }); 
+0

Зачем запускать 'change', когда нет захвата? – lshettyl

+0

Прежде чем дать -1 поиск: http://stackoverflow.com/questions/4672505/why-does-the-jquery-change-event-not-trigger-when-i-set-the-value-of-a-select -us – Kosmog

+1

Ну, я не дал -1 кстати! Вы перепутаете 'change', чтобы установить выбранное значение. То, что хочет OP, - это установить выбранное значение, нажав на кнопку! Итак, 'change' здесь не имеет значения, а' change' даже не привязан к 'select' – lshettyl

0

, как у вас есть идентификатор применительно к каждой опции вы можете настроить таргетинг, что идентификатор затем использовать метод .prop().

$(document).ready(function(){ 
$(".firstFilter").click(function(){ 
    var id = $("#created_at").prop("selected","selected"); 
}); 
}); 
0

Используйте этот

function triggerChange(){  
$("#target_menu").eq(4).prop("selected","selected");  
} 
1

Есть несколько способов сделать это. Один из них ниже. Кусок советов заключается в том, что не используйте встроенные обработчики событий!

$("button").on("click", function() { 
 
    $("#target_menu option").filter(function(opt, el) { 
 
     return el.id === 'created_at' && $(el) 
 
    }).prop("selected", true); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="target_menu" name="sort_by"> 
 
    <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option> 
 
    <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option> 
 
    <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option> 
 
    <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option> 
 
    <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option> 
 
</select> 
 

 
<button class="FirstFilter"> 
 
    Click me! 
 
</button>

Смежные вопросы