选中“N / A”复选框后,从下拉列表中自动选择“面对面访谈”?

时间:2012-06-27 04:47:04

标签: javascript drop-down-menu checkbox greasemonkey

我正在尝试创建一个脚本,一旦选中N / A(个人访谈)复选框,将在下拉字段中自动选择“面对面访谈”。我已经在这里阅读了近2个星期的例子,没有找到任何可以指向正确方向的运气。任何帮助表示赞赏。感谢。

Here is the fiddle I've been trying to work with

这是标记:

<li id="fielditem_51926" class="field toggleField">
    <table>
        <tbody>
            <tr>
                <td style="width: auto">
                    <input type="hidden" value="false" name="client[custom][custom70]">
                    <input id="field_51926" class=" field_51926 " type="checkbox" value="true" name="client[custom][custom70]">
                    <label id="field_51926_form_label">N/A·(In Person Interview)?·</label>
                    <div id="field_51926_form_note" class="global_note"></div>
                </td>
                <td></td>
            </tr>
        </tbody>
    </table>
</li>
<li id="fielditem_50508" class="field toggleField">?
    <table>
        <tbody>
            <tr>
                <td style="width: auto">
                    <label id="field_50508_form_label" class="above">
                        Need
                        <span class="alert">&nbsp;*</span>
                    </label>
                    <div id="field_50508_form_note" class="global_note">What Are You Looking For Today?</div>
                    <div id="container-50508" class="field_container">
                        <select id="field_50508" class="required_field " name="client[module][custom23][0][option_id]">
                            <option label="(select)" value="">(select)</option>
                            <option label="Utilities" value="45398">Utilities</option>
                            <option label="Motel Voucher" value="45947">Motel?·Voucher</option>
                            <option label="Health" value="49184">Health</option>
                            <option label="General Outreach Event" value="62620">General?·Outreach?·Event</option>
                            <option label="Email" value="46046">Email</option>
                            <option label="Disaster" value="45449">In Person Interview</option>
                        </select>
                    </div>
                </td>
                <td></td>
            </tr>
        </tbody>
    </table>
</li>

1 个答案:

答案 0 :(得分:1)

IF 这就是HTML的样子,然后这是一个 完整脚本 ,它使用jQuery选择所需的选项,当该复选框是检查。

See the underlying code in action at jsFiddle.

// ==UserScript==
// @name     _Select matching option when CB checked, in poorly structured HTML
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// ==/UserScript==

var targChkBox = $("label:contains('(In Person Interview)')").prev ("input");
targChkBox.change (function () {
    if (this.checked) {
        var matchingOption  = $("option:contains('In Person Interview')");
        var targValue       = matchingOption.prop ("value");
        var targSelect      = matchingOption.parents ("select.required_field");
        targSelect.val (targValue); //-- Select the desired option.
    }
} );


假设字段和ID号是可变的,因此关键元素可以通过其文本找到(“面对面访谈”)。

请注意,HTML看起来很可疑。例如,标签被滥用并且没有for属性。如果您在使用此代码时遇到困难,请链接到实际目标页面。