javascript function for set periodicity in the week as in google calendar

Question

I am trying to write a generic javascript subroutine to set the periodicity in the week:

var items = {"0": "none", "1":"Daily", "2": "Every weekday (Monday to Friday)", "3": "Weekly"};

I wrote the following module, but I would like to improve it, making it more generic and readable if it is possible.

So my questions are:
1) How can I ameliorate this piece of code?
2) How can make a callback in order to make something like this:

var callback = selectDay(idValue);​
createSelect(items, idValue, callback);

---

var createSelect = function (items, idValue) {
    var selElem = document.createElement("select");
    $.each(items, function (key, value) {
        var ov = document.createElement("option");
        ov.value = key;
        ov.appendChild(document.createTextNode(value));
        selElem.appendChild(ov);
    });
    $(idValue).prepend(selElem);
};

---

var selectDay = function (idValue, element) {
    var element = $(idValue);
    var childElements = idValue + '_';
    element.find('select').change(function () {
        if($(this).val() === '0') {
            element.find('label').hide();
            $(this).closest('div').find('input').attr("checked", false);
        }
        if($(this).val() === '1') {
            element.find('label').hide();
            $(this).closest('div').find('input').attr("checked", true);
        }
        if($(this).val() === '2') {
            element.find('label').show();
            for (var i = 0; i < 5; i += 1) {
                $(childElements + i).attr("checked", true);
            }
            for (var i = 5; i < 7; i += 1) {
                $(childElements + i).attr("checked", false);
            }
        }
        if($(this).val() === '3') {
            element.find('label').show();
            $(this).closest('div').find('input').attr("checked", false);
            $(childElements + (new Date()).getDay()).attr("checked", true);
        }
    });
};

---

var items = {"0": "none", "1":"Daily", "2": "Every weekday (Monday to Friday)", "3": "Weekly"};
var idValue = '#contest_data_updatePeriodicity_days';
createSelect(items, idValue);
selectDay(idValue);​

Here is my demo http://jsfiddle.net/D2RLR/2634/

Answer 1

1. Use prop() instead of attr().
2. See the first point.
3. You're declaring var selectDay = function(idValue, element), your element argument is probably a typo? You don't need it.
4. See the first point.
5. Use switch instead of all those if. Or at least cache the $(this).val() result.
6. See the first point.
7. You don't need element.find(), you could use the context (somehow cleaner).

Overall, here is some code to give you the idea:

var selectDay = function (idValue) {
    $('select', idValue).change(function() {
        switch ($(this).val()) {
            case '0':
                $('label', idValue).hide();

                // Use prop(), not attr().
                $(this).closest('div').find('input').prop('checked', true);
                break;
        }
    });
};

Now you may notice something: this doesn't have exactly the same behavior as your code. Guess why :-)

A friend of mine says that whenever you use a switch case, you can actually use a mapping object. This might be another way to do it. The mapping object would be something like:

var mapping = {
    '0': {
        'label': 'hide',
        'checked': false
    },
    '1': {
        'label': 'hide',
        'checked': true
    }
};

And then you code accordingly to this object.