如何選擇頁面加載選項

Question

我想寫一些JS擴展的代碼來自動選擇頁面加載選項。到目前爲止，我還沒有弄明白。這就是我 -

document.getElementByValue("9.0").selected=true; 

什麼即時試圖做的是有它選擇選項，然後使用點擊提交按鈕 -

document.getElementByClass('active_step').click(); 

這是在頁面林測試 - 測試第

好吧，我覺得我用下面的代碼越來越近，林 -

function SubmitIt(){ 
$("input[name='pdp_addtocart']").click(); 
} 

function SelectIt(){ 
document.getElementById("product_sizes").selectedIndex = 3; 
} 

SelectIt(); 
SubmitIt(); 

的選擇選項突出顯示，但它並沒有真正被點擊，因爲頁面告訴我先選擇一個選項，我假設我的代碼嘗試點擊提交。所以現在我需要弄清楚如何實際點擊突出顯示的選項。

Answer 1

經過與您的測試頁面混淆後，事實證明除了設置product_sizes<select>元素的選定值之外，還有更多情況發生在背景中。有，也保存實際選擇的值一個隱藏<input>元件，因此它的值必須被設置，以及（見下面的代碼）：

的manifest.json：

{ 
    "manifest_version": 2, 

    "name": "Test Extension", 
    "version": "0.0", 
    "offline_enabled": false, 

    "content_scripts": [{ 
     "matches": ["*://www.example.com/*"], 
     "js":   ["content.js"], 
     "run_at":  "document_end", 
     "all_frames": false 
    }] 
} 

content.js：

var selectedIdx = 3; 
var selectSize = document.querySelector('select#product_sizes'); 
var hiddenSize = document.querySelector('input[type="hidden"]#pdp_selectedSize'); 
var addToCart = document.querySelector(
     'input[type="submit"][name="pdp_addtocart"]'); 

if ((selectSize !== undefined) && (hiddenSize !== undefined) 
     && (addToCart !== undefined)) { 
    selectSize.selectedIndex = 3; 
    hiddenSize.value = selectSize.value; 
    addToCart.click(); 
} 

<UPDATE>

對於基於尺寸選擇，修改content.js這樣的：

var targetSize = 9.0; 
var selectSize = document.querySelector('select#product_sizes'); 
var hiddenSize = document.querySelector('input[type="hidden"]#pdp_selectedSize'); 
var addToCart = document.querySelector(
     'input[type="submit"][name="pdp_addtocart"]'); 

if ((selectSize !== undefined) && (hiddenSize !== undefined) 
     && (addToCart !== undefined)) { 
    var targetSizeStr = targetSize.toFixed(1); 
    var optionFound = [].slice.call(selectSize.querySelectorAll('option')) 
           .some(function(opt) { 
     if (parseFloat(opt.value).toFixed(1) === targetSizeStr) { 
      hiddenSize.value = opt.value; 
      return true; 
     } 
     return false; 
    }); 
    optionFound && addToCart.click(); 
} 

</UPDATE >

---

_{注：如果你關心關於頁面的外觀（即，不僅要將商品添加到購物車，而且希望頁面看起來完全像手動選擇尺寸那樣看起來的樣子等等），但還有一些額外的修改需要應用。例如。隱藏<select>元件（display: none;），設置只是<select>到<select>上述<a>元件的data-content屬性s類的價值和其類size_selected，所述addToCart<a>設定'至active_step和也許更多。}