I am lost, please take a look at http://www.austrokamin.at/edelstahlkamine/edelstahlkamin-doppelwandig/bodenplatte-dw.html

I need to set the two dropdowns with jQuery. For example:

jQuery('#product-options-wrapper .input-box select').eq(0).prop('selectedIndex', 2);

No Problem so far. But now some event handler(s) must be triggered so that the second dropdown is activated.

When i select the element in Firebug and type getEventListeners($0) it tells me "blur", "focus" and "change"

I fired all of these events in the console with:

jQuery('#product-options-wrapper .input-box select').eq(0).focus();
jQuery('#product-options-wrapper .input-box select').eq(0).change();
jQuery('#product-options-wrapper .input-box select').eq(0).blur();

but nothing seems to have effect. Can anyone help me please.

1 Answer 1


You can use this js code and then just call $$('#product-options-wrapper .input-box select')[0].simulate('change')

here is the original code. In case it gets removed from github.
The code is not mine. Kudos to kangax

 * Event.simulate(@element, eventName[, options]) -> Element
 * - @element: element to fire event on
 * - eventName: name of event to fire (only MouseEvents and HTMLEvents interfaces are supported)
 * - options: optional object to fine-tune event properties - pointerX, pointerY, ctrlKey, etc.
 *    $('foo').simulate('click'); // => fires "click" event on an element with id=foo

  var eventMatchers = {
    'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
    'MouseEvents': /^(?:click|mouse(?:down|up|over|move|out))$/
  var defaultOptions = {
    pointerX: 0,
    pointerY: 0,
    button: 0,
    ctrlKey: false,
    altKey: false,
    shiftKey: false,
    metaKey: false,
    bubbles: true,
    cancelable: true

  Event.simulate = function(element, eventName) {
    var options = Object.extend(defaultOptions, arguments[2] || { });
    var oEvent, eventType = null;

    element = $(element);

    for (var name in eventMatchers) {
      if (eventMatchers[name].test(eventName)) { eventType = name; break; }

    if (!eventType)
      throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');

    if (document.createEvent) {
      oEvent = document.createEvent(eventType);
      if (eventType == 'HTMLEvents') {
        oEvent.initEvent(eventName, options.bubbles, options.cancelable);
      else {
        oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView, 
          options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
          options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
    else {
      options.clientX = options.pointerX;
      options.clientY = options.pointerY;
      oEvent = Object.extend(document.createEventObject(), options);
      element.fireEvent('on' + eventName, oEvent);
    return element;

  Element.addMethods({ simulate: Event.simulate });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.