代码之家 › 专栏 › 技术社区 › Patrick

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

tampermonkey userscripts html jquery javascript

Patrick · 技术社区 · 7 年前

我想从几十个HTML下拉列表中为一个用户脚本选择一个特定的下拉列表值。有没有办法用我的身份证( {"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更有意义?

1 回复 | 直到 7 年前

Brock Adams 7 年前

回答你的问题: "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(“见注释”); 正在操作 <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>

运行代码段以查看其实际操作。