如何遠程模擬下拉選擇

Question

我有幾個下拉選擇菜單，其中第一個選項更改第二個選項，第二個選項更改第三個選項，等等。

我想在下拉菜單中遠程模擬一個變化（即沒有用戶在選擇菜單中單擊），它將激活javascript以設置下一個下拉選項。 只需設置選擇菜單的值 - document.getElementById（'...'）。value ='....' - 不會在下拉菜單中激發javascript事件。

注意：我沒有訪問控制選擇菜單的javascript，也不知道它在選擇菜單上尋找哪個觸發器（我假設「onselect」）。

我正在使用JavaScript和jQuery庫。我需要解決方案，當然，跨瀏覽器工作。非常感謝您的寶貴時間。

這裏是整個js代碼（似乎是在原型），設置偵聽器的下拉菜單：

/**************************** CONFIGURABLE PRODUCT **************************/ 
Product.Config = Class.create(); 
Product.Config.prototype = { 
    initialize: function(config){ 
     this.config  = config; 
     this.taxConfig = this.config.taxConfig; 
     this.settings = $$('.super-attribute-select'); 
     this.state  = new Hash(); 
     this.priceTemplate = new Template(this.config.template); 
     this.prices  = config.prices; 

     this.settings.each(function(element){ 
      Event.observe(element, 'change', this.configure.bind(this)) 
     }.bind(this)); 

     // fill state 
     this.settings.each(function(element){ 
      var attributeId = element.id.replace(/[a-z]*/, ''); 
      if(attributeId && this.config.attributes[attributeId]) { 
       element.config = this.config.attributes[attributeId]; 
       element.attributeId = attributeId; 
       this.state[attributeId] = false; 
      } 
     }.bind(this)) 

     // Init settings dropdown 
     var childSettings = []; 
     for(var i=this.settings.length-1;i>=0;i--){ 
      var prevSetting = this.settings[i-1] ? this.settings[i-1] : false; 
      var nextSetting = this.settings[i+1] ? this.settings[i+1] : false; 
      if(i==0){ 
       this.fillSelect(this.settings[i]) 
      } 
      else { 
       this.settings[i].disabled=true; 
      } 
      $(this.settings[i]).childSettings = childSettings.clone(); 
      $(this.settings[i]).prevSetting = prevSetting; 
      $(this.settings[i]).nextSetting = nextSetting; 
      childSettings.push(this.settings[i]); 
     } 

     // Set default values - from config and overwrite them by url values 
     if (config.defaultValues) { 
      this.values = config.defaultValues; 
     } 

     var separatorIndex = window.location.href.indexOf('#'); 
     if (separatorIndex != -1) { 
      var paramsStr = window.location.href.substr(separatorIndex+1); 
      var urlValues = paramsStr.toQueryParams(); 
      if (!this.values) { 
       this.values = {}; 
      } 
      for (var i in urlValues) { 
       this.values[i] = urlValues[i]; 
      } 
     } 

     this.configureForValues(); 
     document.observe("dom:loaded", this.configureForValues.bind(this)); 
    }, 

    configureForValues: function() { 
     if (this.values) { 
      this.settings.each(function(element){ 
       var attributeId = element.attributeId; 
       element.value = (typeof(this.values[attributeId]) == 'undefined')? '' : this.values[attributeId]; 
       this.configureElement(element); 
      }.bind(this)); 
     } 
    }, 

    configure: function(event){ 
     var element = Event.element(event); 
     this.configureElement(element); 
    }, 

    configureElement : function(element) { 
     this.reloadOptionLabels(element); 
     if(element.value){ 
      this.state[element.config.id] = element.value; 
      if(element.nextSetting){ 
       element.nextSetting.disabled = false; 
       this.fillSelect(element.nextSetting); 
       this.resetChildren(element.nextSetting); 
      } 
     } 
     else { 
      this.resetChildren(element); 
     } 
     this.reloadPrice(); 
//  Calculator.updatePrice(); 
    }, 

    reloadOptionLabels: function(element){ 
     var selectedPrice; 
     if(element.options[element.selectedIndex].config){ 
      selectedPrice = parseFloat(element.options[element.selectedIndex].config.price) 
     } 
     else{ 
      selectedPrice = 0; 
     } 
     for(var i=0;i<element.options.length;i++){ 
      if(element.options[i].config){ 
       element.options[i].text = this.getOptionLabel(element.options[i].config, element.options[i].config.price-selectedPrice); 
      } 
     } 
    }, 

    resetChildren : function(element){ 
     if(element.childSettings) { 
      for(var i=0;i<element.childSettings.length;i++){ 
       element.childSettings[i].selectedIndex = 0; 
       element.childSettings[i].disabled = true; 
       if(element.config){ 
        this.state[element.config.id] = false; 
       } 
      } 
     } 
    }, 

    fillSelect: function(element){ 
     var attributeId = element.id.replace(/[a-z]*/, ''); 
     var options = this.getAttributeOptions(attributeId); 
     this.clearSelect(element); 
     element.options[0] = new Option(this.config.chooseText, ''); 

     var prevConfig = false; 
     if(element.prevSetting){ 
      prevConfig = element.prevSetting.options[element.prevSetting.selectedIndex]; 
     } 

     if(options) { 
      var index = 1; 
      for(var i=0;i<options.length;i++){ 
       var allowedProducts = []; 
       if(prevConfig) { 
        for(var j=0;j<options[i].products.length;j++){ 
         if(prevConfig.config.allowedProducts 
          && prevConfig.config.allowedProducts.indexOf(options[i].products[j])>-1){ 
          allowedProducts.push(options[i].products[j]); 
         } 
        } 
       } else { 
        allowedProducts = options[i].products.clone(); 
       } 

       if(allowedProducts.size()>0){ 
        options[i].allowedProducts = allowedProducts; 
        element.options[index] = new Option(this.getOptionLabel(options[i], options[i].price), options[i].id); 
        element.options[index].config = options[i]; 
        index++; 
       } 
      } 
     } 
    }, 

    getOptionLabel: function(option, price){ 
     var price = parseFloat(price); 
     if (this.taxConfig.includeTax) { 
      var tax = price/(100 + this.taxConfig.defaultTax) * this.taxConfig.defaultTax; 
      var excl = price - tax; 
      var incl = excl*(1+(this.taxConfig.currentTax/100)); 
     } else { 
      var tax = price * (this.taxConfig.currentTax/100); 
      var excl = price; 
      var incl = excl + tax; 
     } 

     if (this.taxConfig.showIncludeTax || this.taxConfig.showBothPrices) { 
      price = incl; 
     } else { 
      price = excl; 
     } 

     var str = option.label; 
     if(price){ 
      if (this.taxConfig.showBothPrices) { 
       str+= ' ' + this.formatPrice(excl, true) + ' (' + this.formatPrice(price, true) + ' ' + this.taxConfig.inclTaxTitle + ')'; 
      } else { 
       str+= ' ' + this.formatPrice(price, true); 
      } 
     } 
     return str; 
    }, 

    formatPrice: function(price, showSign){ 
     var str = ''; 
     price = parseFloat(price); 
     if(showSign){ 
      if(price<0){ 
       str+= '-'; 
       price = -price; 
      } 
      else{ 
       str+= '+'; 
      } 
     } 

     var roundedPrice = (Math.round(price*100)/100).toString(); 

     if (this.prices && this.prices[roundedPrice]) { 
      str+= this.prices[roundedPrice]; 
     } 
     else { 
      str+= this.priceTemplate.evaluate({price:price.toFixed(2)}); 
     } 
     return str; 
    }, 

    clearSelect: function(element){ 
     for(var i=element.options.length-1;i>=0;i--){ 
      element.remove(i); 
     } 
    }, 

    getAttributeOptions: function(attributeId){ 
     if(this.config.attributes[attributeId]){ 
      return this.config.attributes[attributeId].options; 
     } 
    }, 

    reloadPrice: function(){ 
     var price = 0; 
     var oldPrice = 0; 
     for(var i=this.settings.length-1;i>=0;i--){ 
      var selected = this.settings[i].options[this.settings[i].selectedIndex]; 
      if(selected.config){ 
       price += parseFloat(selected.config.price); 
       oldPrice += parseFloat(selected.config.oldPrice); 
      } 
     } 

     optionsPrice.changePrice('config', {'price': price, 'oldPrice': oldPrice}); 
     optionsPrice.reload(); 

     return price; 

     if($('product-price-'+this.config.productId)){ 
      $('product-price-'+this.config.productId).innerHTML = price; 
     } 
     this.reloadOldPrice(); 
    }, 

    reloadOldPrice: function(){ 
     if ($('old-price-'+this.config.productId)) { 

      var price = parseFloat(this.config.oldPrice); 
      for(var i=this.settings.length-1;i>=0;i--){ 
       var selected = this.settings[i].options[this.settings[i].selectedIndex]; 
       if(selected.config){ 
        var parsedOldPrice = parseFloat(selected.config.oldPrice); 
        price += isNaN(parsedOldPrice) ? 0 : parsedOldPrice; 
       } 
      } 
      if (price < 0) 
       price = 0; 
      price = this.formatPrice(price); 

      if($('old-price-'+this.config.productId)){ 
       $('old-price-'+this.config.productId).innerHTML = price; 
      } 

     } 
    } 
} 

所有選擇菜單有類「超級屬性 - 選擇」

Answer 1

這樣Somethinkg可能工作：

$('select option[value=yourValue]').click(); 

或者：

$('select').find('option[value=yourValue]').attr('selected', 'selected').end().trigger('onselect'); 

Answer 2

對於這個

<select name="blah"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
</select> 

你，如果你正在尋找.trigger('select');或trigger('onselect');，但我從來沒有用過這些

$('select[name="blah"]').val(3).trigger('change'); 

不知道。

Demo