如何选择页面加载选项

How to select option on page load

本文关键字：加载 选项 选择 何选择      更新时间：2024-06-07

我正试图为chrome扩展编写一些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();

选择选项被突出显示，但实际上并没有被点击，因为页面告诉我先选择一个选项，我假设我的代码尝试点击提交。所以现在我需要弄清楚如何实际点击突出显示的选项。

在对测试页面进行了一些处理之后，发现除了设置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();
}

<更新>

要根据大小进行选择，请修改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();
}

<更新>

注意：如果您关心页面的外观（即不仅要将项目添加到购物车中，而且您希望页面的外观与手动选择大小时的外观完全相同等），则需要进行一些额外的修改。例如，隐藏<select>元素（display: none;），将<select>正上方的<a>元素的data-content属性设置为<select>的值，将其类设置为size_selected，将addToCart<a>的类设置为active_step，甚至更多。

相关文章：