如何根据下拉菜单填写 HTML 页面中的用户名字段

Question

我希望为测试人员创建一个工具，使他们的工作更轻松一些。目前，他们有 Excel 个工作表，其中一列的名称易于理解，可以映射到数字 ID。

数字 ID 是实际的登录名，因此他们在 excel 文件中查找 naem 并将其复制到用户名字段。

几次之后，这变得非常乏味。

我想为 Tamper Monkey 制作一个 JS 脚本，它基于显示测试人员的下拉菜单填充登录页面上的用户名和密码字段（我无法编辑源代码，因此我使用 Tamper Monkey）可理解的名称列表，并根据他们的选择使用正确的数字 ID 填充用户名字段。

我试过以下方法：

 $('#username').attr('value', '4000021865');
 $('#password').attr('value', 'Test');

这让我登录了一个用户。

但是我在网上找不到任何关于 TamperMonkey 的基于下拉列表的字段填充的工作示例，我不知道从哪里开始。

如果有人能指出我正确的方向，将不胜感激。

Answer 1

我找到了一个可以重复使用的模板，它完全符合我的需要。

 // ==UserScript==
 // @name        facebook login
 // @namespace   http://123.123
 // @include     https://www.facebook.com/*
 // @version     1
 // @require     http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.js
 // @require     http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js
 // @resource    bt 
 http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
 // @resource    bt-theme 
 http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css
 // @grant       GM_addStyle
 // @grant       GM_getResourceText
 // ==/UserScript==
(function() {
if ($('#login_form').length <= 0) {
    console.log('No login_form');
    return;
}

GM_addStyle(GM_getResourceText("bt"));
GM_addStyle(GM_getResourceText ("bt-theme"));
GM_addStyle("#menu1 a {text-align: left}");
var $loginbutton = $('#loginbutton');
var menu = '<span class="dropdown btn btn-primary" style="padding: 2px; margin: 0 0 0 5px;">' +
           '<a id="drop4" href="#" data-toggle="dropdown" role="button" style="color: #FFF">User Selection ' +
           '<b class="caret"></b>' +
           '</a>' +
           '<ul id="menu1" class="dropdown-menu" aria-labelledby="drop4" role="menu">' +
           '<li>' +
           '<a href="#" role="menuitem">kaoyenchi</a>' +
           '</li>' +
           '<li>' +
           '<a href="#" role="menuitem">tcyc</a>' +
           '</li>' +
           '<li>' +
           '<a href="#" role="menuitem">fcwu</a>' +
           '</li>' +
           '</ul>' +
           '</span>'
$loginbutton.parent().append(menu);
var accounts = {};
accounts['fcwu'] = ['', ''];
accounts['kaoyenchi'] = ['', ''];
accounts['tcyc'] = ['', ''];
accounts['timy'] = ['', ''];
$('#menu1 a').click(function() {
    name = $(this).text()
    $('#email').attr('value', accounts[name][0]);
    $('#pass').attr('value', accounts[name][1]);
    $('#login_form').submit();
});

})();

Answer 2

如果它是 <select> 并且有多个 <options> 你也可以这样做。 $('#selectId').attr('value', 'optionValue');

示例：http://jsfiddle.net/g689n1d2/

如何根据下拉菜单填写 HTML 页面中的用户名字段

How do I fill the username field in a HTML page based on a dropdown

html

javascript

tampermonkey