Question

I’m trying to create a script that will automatically select “In Person Interview” in the dropdown field once the N/A (In Person Interview) check box is checked. I’ve been reading through examples on here for almost 2 weeks now with no luck in finding anything that can point me in the right direction. Any help is appreciated. Thanks.

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

Here is the markup:

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

Answer 1

IF that is what the HTML looks like, then here’s a complete script that uses jQuery to select the desired option when that checkbox is checked.

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.
    }
} );

It is assumed that the field and ID numbers are variable, so the key elements are found via their text (“In Person Interview”).

Note that that HTML looks suspect,. The labels are misused and have no for attribute, for example. If you encounter difficulty getting this code to work, link to the actual target page.