Javascript 如何选择页面加载选项

我正在尝试为chrome扩展编写一些JS代码，以便在页面加载时自动选择一个选项。到目前为止我还没有弄明白。这就是我所拥有的--

我要做的是让它选择该选项，然后使用--

这是Im测试上的页面-测试页面

好的，我想我快到了，我用了下面的代码--

---

select选项高亮显示，但实际上没有被单击，因为页面告诉我先选择一个选项，我假设我的代码尝试单击submit。因此，现在我需要弄清楚如何实际单击突出显示的选项。

在对测试页面进行了一些修改之后，结果发现，除了为

产品大小设置所选值之外，还有更多的事情发生在后台。还有一个隐藏的
元素，它保存实际选定的值，因此也必须设置它的值（请参见下面的代码）：

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
    }]
}

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:

{
    "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
    }]
}

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();
}




注意：如果您关心页面的外观（即，不仅要将项目添加到购物车，而且希望页面的外观与手动选择大小时的外观完全相同等），则需要进行一些额外的修改。例如，隐藏
元素（
显示：无；
），将
元素的
数据内容
属性设置为
上的
值及其类设置为所选的
大小
，将addToCart
的类设置为
活动步骤
，甚至更多。
您没有告诉我们什么不起作用。这两种方法都不起作用，因为在选择该选项之前，单击是不可能发生的，但我想我是用它来选择它的，我只是不知道如何让单击在以后发生。我上面的选择代码突出显示了该选项，但不一定要单击它，这就是我正在尝试做的。因此，将选择一个选项并单击，然后单击提交按钮@保罗·德雷帕杜德……太棒了！谢谢，我遇到了一个问题。由于selectedindex的选项值不一致，有没有办法通过选项值而不是SelectIndex来实现？为什么不从一开始就给出确切的要求？我们的输入是什么？预期结果是什么？满足了要求，我只是没有意识到与大小相对应的selectedindex会有所不同，因此，例如，与大小9相对应的不是3，而是不同的。所以我在问如何根据期权价值而不是顺序来选择。除此之外，尽管您的答案非常有效，但这只是selectedindex/option值问题。@user3089477:您尝试过我更新的答案吗？对你有用吗？请，如果你觉得合适的话，考虑一下这个问题：
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();
}