When focus is on a select-list, I'd like focus to be forced/sent to a specific other element (by its id) on change of said select-list.

if option-value = A, send focus to a unique id element
if option-value = B, send focus to a different id element

Based on my research, the jquery event: .focus() should work. But no joy, on a multitude of element ids tested. Focus persists on the select-list.

I've thrown together a stripped-down test page demonstrating the code pasted below:http://bit.ly/64YDlW

Any assistance is appreciated. I'm prolly staring right at either the solution or the cause of the problem...

JQUERY STACK

<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {

    // hides select elements onload
    $("#wrap_large").hide();
    $("#wrap_small").hide();

    // other onload functions

    // list > display large or small wraps
    $("#list").change(function() {
        var setting = document.getElementById('list');
            // 
            if (
            setting.value == 'small'    //
            ) {
                $("#wrap_small").show();
                $("#wrap_large").hide();
                $("#btn_small_submit").focus;
            }
            //
            else {
                $("#wrap_large").show();
                $("#wrap_small").hide();
                $("#accept").focus;
            }
    })
})     
</script>

HTML

<form action="#" method="post">
<select name="list" id="list">
    <option value="large">large</option>
    <option value="small" selected="selected">small</option>
</select>

<!-- ~~~~~~~~~~ START small wrap START ~~~~~~~~~~ -->
<div id="wrap_small">
    <button type="submit" id="btn_small_cancel">Cancel</button>
    <button type="submit" id="btn_small_submit">Submit</button>
</div>
<!-- ~~~~~~~~~~ END small wrap END ~~~~~~~~~~ -->
</form>

<!-- ~~~~~~~~~~ START large wrap START ~~~~~~~~~~ -->
<div id="wrap_large">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<input name="accepted" type="checkbox" value="on" id="accept" /> I accepted blah blah
<br />
            
<button type="submit" title="Cancel" id="btn_large_cancel">Cancel</button>
<button type="submit" title="Submit" id="btn_large_submit">Submit</button>                        

</div>
<!-- ~~~~~~~~~~ END large wrap END ~~~~~~~~~~ -->

As always, the root cause of quirky code is 9x out of 10x the difference of 1-2 characters.

The reason my code wasnt working was that i was missing the "()" at the end of my focus event.

So, instead of:
$("#my_id").focus;

This is what works for me:
$("#my_id").focus();

drrrrr.....

Thanks for reading.
seannarae

As it would

element.focus() is a method of the obect class, whereas element.focus would be refering to a property of the object.

Yes, an example of using this would be:

if (object.focus) // Check if the browser support the focus() function.
object.focus(); // If it does, focus object.
else
alert("Your browser does not support focus!"); // else make client aware of this issue.