Question

我希望从用户脚本的几十个HTML下拉列表中选择一个特定的下拉值。有没有办法使用我拥有的ID（{"Id":"302"}）？

我尝试根据课程选择所有项目作为跳跃点，但我没有取得多大成功。理想情况下，如果我可以根据提供的ID进行选择，则可以让我对选择更加具体。

我有什么：

waitForDropdown (".control:has(option[value='See Notes'])", selectDropdown);

function selectDropdown (jNode) {
    var evt = new Event ("click");
    jNode[0].dispatchEvent (evt);

    jNode.val('See Notes');

    evt = new Event ("change");
    jNode[0].dispatchEvent (evt);
}

这是HTML：

<div class="field tabular">
    <span class="item-data">{"Id":"302"}</span>
    <div class="field-content">
        <div class="title" title="Dropdown A">Dropdown A</div>
        <div class="data">
            <div class="errors"></div>
            <div class="control">
                <select>
                    <option value="Not Checked" selected="selected">Not Checked</option>
                    <option value="Checked &amp; Cleaned">Checked &amp; Cleaned</option>
                    <option value="Not Applicable">Not Applicable</option>
                    <option value="See Section Notes">See Notes</option>
                </select>
    <!-- Etc... -->

我可以使用标题来缩小选择范围吗？或者ID会更有意义吗？

Answer 1

回答你的问题："Could I use the title to narrow the selection? Or would the ID make more sense?"

稳定的数字ID 通常是您最好的选择。标题或其他文本受以下内容的约束：编辑或翻译/国际化。但是如果id从页面更改为页面，或者从页面重新加载;不要使用它。

该代码存在以下几个问题：

waitForDropdown()既不是标准也不是定义。 问题应包含MCVEs。
在这种情况下，它看起来像waitForKeyElements的可能版本 - 现在是常见的，标准的和经过测试的。
选择器：option[value='See Notes']与任何HTML都不匹配请参阅the jQuery Attribute selectors docs。
jNode.val('See Notes');正在尝试设置无效值。
jNode.val('See Notes');正在<div class="control">上运行。它需要在<select>上运行。

无论如何，the companion question说明了一个自上而下的树遍历来获取正确的节点。所以，在这里，我将说明一个自下而上的方法。与其他答案不同，它也 AJAX识别 请参阅the jQuery Tree Traversal docs。

以下是完整的用户说明，其中显示了如何根据关联的节点/ ID区分选项。（用户脚本只是第一个灰色块）：

// ==UserScript==
// @name     _Set <select> value under specific HTML section id
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.

waitForKeyElements (".control > select > option[value$='Cleaned']", selectId302Value);

function selectId302Value (jNode) {
    //-- Make sure control belongs to the correct id:
    var idNode  = jNode.closest (".field-content").prev (".item-data");
    if (idNode.length === 0) {
        console.error ("Page structure changed or invalid in selectId302Value().");
        return;
    }
    if (idNode.text ().includes ('"302"') ) {
        var evt     = new Event ("click");
        jNode[0].dispatchEvent (evt);

        //-- Correct val already determined by WFKE selector.
        jNode.parent ().val(jNode.val () );

        //-- The select node would get any required change event.
        evt         = new Event ("change");
        jNode.parent ()[0].dispatchEvent (evt);
    }
}

<!----------------------------------------
----- Simulated target page follows: -----
----------------------------------------->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//greasyfork.org/scripts/2199-waitforkeyelements/code/waitForKeyElements.js"></script>
<div class="field tabular">
    <span class="item-data">{"Id":"302"}</span>
    <div class="field-content">
        <div class="title" title="Dropdown A">Dropdown A</div>
        <div class="data">
            <div class="errors"></div>
            <div class="control">
                <select>
                    <option value="Not Checked" selected="selected">Not Checked</option>
                    <option value="Checked &amp; Cleaned">Checked &amp; Cleaned</option>
                    <option value="Not Applicable">Not Applicable</option>
                    <option value="See Section Notes">See Notes</option>
                </select>
    </div></div></div>

    <span class="item-data">{"Id":"777"}</span>
    <div class="field-content">
        <div class="title" title="Dropdown B">Dropdown B</div>
        <div class="data">
            <div class="errors"></div>
            <div class="control">
                <select>
                    <option value="Not Checked" selected="selected">Not Checked</option>
                    <option value="Checked &amp; Cleaned">Checked &amp; Cleaned</option>
                    <option value="Not Applicable">Not Applicable</option>
                    <option value="See Section Notes">See Notes</option>
                </select>
    </div></div></div>
</div>

运行代码段以查看其实际效果。

设置与同一HTML部分中的id节点关联的下拉列表的值

1 个答案: