如何在没有元素ID的下拉菜单中选择Javascript选项?

How do I select an option with Javascript in a dropdown that doesn't have an element ID?

本文关键字:下拉菜单 选择 Javascript 选项 ID 元素      更新时间:2023-09-26

我有一个网站,我不能编辑,我经常访问。我正在使用Greasemonkey for Firefox和Tampermonkey for Chrome,尝试使用Javascript在下拉菜单中自动选择一个值。下面是下拉列表的元素

<select name="term">
    <option value="12">12 /mo. - $20.95/mo.</option>
    <option value="24">24 /mo. - $17.95/mo.</option>
    <option value="36">36 /mo. - $15.95/mo.</option>
</select>

可以看到,没有元素id。我试着遵循这里和这里的答案,但将它们改为使用document.getElementsByName而不是document.getElementById,因为这个下拉元素没有id,但我所做的一切都不起作用。

我如何使用Greasemonkey或Tampermonkey在访问该网页时自动选择"36"的值?

您可以使用属性选择器按名称访问元素。当你设置它的值时,它会选择具有该值的选项。

$("select[name=term]").val("36");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="term">
    <option value="12">12 /mo. - $20.95/mo.</option>
    <option value="24">24 /mo. - $17.95/mo.</option>
    <option value="36">36 /mo. - $15.95/mo.</option>
</select>

// ==UserScript==
// @name         http://stackoverflow.com/questions/32979378
// @match        http://website.with.dropdown.com/*
// @grant        none
// ==/UserScript==
(document.querySelector && document.querySelector('select[name="term"]') || []).value = '36';
<select name="term">
  <option value="12">12 /mo. - $20.95/mo.</option>
  <option value="24">24 /mo. - $17.95/mo.</option>
  <option value="36">36 /mo. - $15.95/mo.</option>
</select>

看起来可以在greasemonkey中使用jQuery

// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js

如何在Greasemonkey使用jQuery ?

则jQuery选择器将沿着以下行:

$("select[name=term]")
https://api.jquery.com/attribute-equals-selector/