[JQuery] Remove one select option based on a different select option

JQuery is simply amazing. I am really impressed with this javascript framework. My previous framework of choice was Scriptaculous and I was happy with it, but it always seemed limiting. Since switching to JQuery over about 6 months ago I have been pleasantly surprised. For example, I had to create a function on a select to remove a specific option from a different select based on the first selects selected option.

Previously I would have created it with ugly code like this:

function disableSelectOptions(value) {
    var select_obj = document.getElementById('select_you_want_to_change');
    var first_obj = document.getElementById('select_you_change_based_on');
    var first_obj_value = first_obj.options[first_obj.selectedIndex].value;
 
    // Get value of 'first_obj'
	if(first_obj_value == 3) {
	    select_obj.options[1].disabled = true;
	    select_obj.options[1].selected = false;
	} else {
            select_obj.options[0].disabled = false;
	    select_obj.options[1].disabled = false;
            select_obj.options[3].disabled = false;
	}
}
 
// now we need to trigger the previous function
function UpdateSelect(selectobj) {
    var value = selectobj.selectedIndex;
    disableSelectOptions(value);
}

You then need to add the onchange events to your select like this:

<select name="this_id"></select>

There are many things that could have been done better with the above. First it relies on you choosing the correct option index. Second it’s a whole lot of code AND It doesn’t work properly in IE6. Compare that with the code below and you can see the many benefits.

$(document).ready(function(){
        $("#select_you_change_based_on").change(function () {
            if(this.value == "some_value") {
                // remove option from select_you_want_to_change
                $("'#select_you_want_to_change' option[value='some_value']").remove();
            } else {
                if($("#select_you_want_to_change option[value='some_value']").length &gt; 0) {
                    // do nothing because it already exists
                } else {
                    // add option back to select_you_want_to_change
                    $("#select_you_want_to_change").prepend("Some Value Text");
                }
            }
        }).change();
});

With the above code you no longer need to add onchange=”UpdateSelect(this);” to your select box as we are binding a function to the onchange event. Even nicer is that you can use the option value to locate the option you want to remove instead of the option index (which can change if you add other things to your select options).

Hopefully the above code can help someone else.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>