Question

I have two select boxes that allows a user to select a valid day for example

<select name="valid">
    <option>monday</option>
    <option>tuesday</option>
    <option>wednesday</option>
    <option>thursday</option>
    <option>friday</option>
    <option>saturday</option>
    <option>sunday</option>
</select>

<select name="valid-2">
    <option>monday</option>
    <option>tuesday</option>
    <option>wednesday</option>
    <option>thursday</option>
    <option>friday</option>
    <option>saturday</option>
    <option>sunday</option>
</select>

what I need is a way to make sure if a user selects monday then they can not select monday or tuesday in the valid 2 select drop down.

However with out doing some thing like disabling the two days in valid two I am not sure how to do it.

I guess I could make the second select drop down after the user selects the first drop down.

So my question is how would you do it. and is there any simple and easy ways.

Answer 1

Since we get to use jQuery, here’s my solution:

$(function () {
    var $one = $("[name='valid']"), 
        $two = $("[name='valid-2']"), 
        $both = $($one).add($two),
        $error = $("#error");

    $both.on("change", function () {
        var index = $one.find(":selected").index(),
            index_two = $two.find(":selected").index();

        //Note: will also catch sunday/monday combo (that's why it's % 6)
        if((Math.abs(index_two - index) % 6) < 2) {
            //Show an error of some sort, like this:
            $both.css("border", "1px solid red");
            $error.text("Dates cannot be less than 2 days apart!");
        } else {
            //Hide the error message:
            $both.css("border", "");   
            $error.text("");
        }
    });
});

I tossed in an error <span> after the options, you can see it in my JSFiddle demo:

http://jsfiddle.net/V7HMU/

As others have said, some sort of onsubmit-based validation is probably called for. It’s a bit annoying to users to have to sort things out on the fly while the site is criticizing their every choice. But if you want to provide some helper text, this is a pretty easy way to do it.

I should note that this could be more efficient if you assigned IDs to the <select> drop downs and also provided some easier way to gauge values (like giving them numeric values). But I didn’t want to mess with your HTML too much (aside from defaulting to a valid option).