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

Question

我正在寻找 select 从数十个 HTML 下拉菜单中为用户脚本寻找一个特定的下拉菜单值。有没有办法使用我的 ID ({"Id":"302"}) 来做到这一点？

我已经尝试 select 以 class 作为起点来处理所有项目，但我没有取得太大的成功。理想情况下，如果我可以 select 基于提供的 ID，它将允许我更具体地使用 select 离子。

我有：

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... -->

我可以使用标题来缩小 selection 吗？还是 ID 更有意义？

Answer 1

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

稳定的数字 ID 通常是您的最佳选择。标题或其他文本受制于：编辑或 translation/internationalization。但是，如果 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 说明了 top-down 树遍历以获得正确的节点。因此，在这里，我将说明一种自下而上的方法。它也 AJAX 知道 ，与其他答案不同。
参考the jQuery Tree Traversal docs.

这里是一个完整的用户脚本，展示了如何根据关联的 node/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 节点关联的下拉列表的值

Setting the value of a Dropdown associated with an id node in the same HTML section

html

javascript

jquery

userscripts

tampermonkey