Optimize and clear the code

[Alexander_Stiopin]

Here is work way (But i don’t love him, too many code)

Html

Game: <select id='games' name='games'><option>-- Сhoose --</option></select>
<p>
To draw: <select id='forgame' name='forgame'><option>-- Сhoose --</option></select>
<p>
<span id="selected1">Here will be next number like #12345</span>
<span id="selected2">For the draw number <input type="text" name="number" /></span>
<span id="selected3">For the draw to be held in <select name='time' id='time'></select></span>
</p>
<input type="submit" id="submit" name="submit" value="Submit game" />

JS

var AutoMode = {
    "games": {
        "7": "Game 1",
            "8": "Game 2",
            "9": "Game 3"
    },
        "options_forgame": {
        "1": "Next",
            "2": "Number",
            "3": "Will be held in"
    },
        "interval": {
        "00:00": "00:00","00:15": "00:15","00:30": "00:30","00:45": "00:45","01:00": "01:00","01:15": "01:15","01:30": "01:30","01:45": "01:45","02:00": "02:00","02:15": "02:15","02:30": "02:30","02:45": "02:45","03:00": "03:00","03:15": "03:15","03:30": "03:30","03:45": "03:45","04:00": "04:00","04:15": "04:15","04:30": "04:30","04:45": "04:45","05:00": "05:00","05:15": "05:15","05:30": "05:30","05:45": "05:45","06:00": "06:00","06:15": "06:15","06:30": "06:30","06:45": "06:45","07:00": "07:00","07:15": "07:15","07:30": "07:30","07:45": "07:45","08:00": "08:00","08:15": "08:15","08:30": "08:30","08:45": "08:45","09:00": "09:00","09:15": "09:15","09:30": "09:30","09:45": "09:45","10:00": "10:00","10:15": "10:15","10:30": "10:30","10:45": "10:45","11:00": "11:00","11:15": "11:15","11:30": "11:30","11:45": "11:45","12:00": "12:00","12:15": "12:15","12:30": "12:30","12:45": "12:45","13:00": "13:00","13:15": "13:15","13:30": "13:30","13:45": "13:45","14:00": "14:00","14:15": "14:15","14:30": "14:30","14:45": "14:45","15:00": "15:00","15:15": "15:15","15:30": "15:30","15:45": "15:45","16:00": "16:00","16:15": "16:15","16:30": "16:30","16:45": "16:45","17:00": "17:00","17:15": "17:15","17:30": "17:30","17:45": "17:45","18:00": "18:00","18:15": "18:15","18:30": "18:30","18:45": "18:45","19:00": "19:00","19:15": "19:15","19:30": "19:30","19:45": "19:45","20:00": "20:00","20:15": "20:15","20:30": "20:30","20:45": "20:45","21:00": "21:00","21:15": "21:15","21:30": "21:30","21:45": "21:45","22:00": "22:00","22:15": "22:15","22:30": "22:30","22:45": "22:45","23:00": "23:00","23:15": "23:15","23:30": "23:30","23:45": "23:45"
    }
};


$.each(AutoMode.games, function (key, value) {
    $('#games')
        .append($("<option></option>")
        .attr("value", key)
        .text(value));
});

$.each(AutoMode.options_forgame, function (key, value) {
    $('#forgame')
        .append($("<option></option>")
        .attr("value", key)
        .text(value));
});

$.each(AutoMode.interval, function (key, value) {
    $('#time')
        .append($("<option></option>")
        .attr("value", key)
        .text(value));
});
$('#number').keypress(function (event) {
    if (event.which < 46 || event.which > 59) {
        event.preventDefault();
    }
    if (event.which == 46 && $(this).val() != -1) {
        event.preventDefault();
    }
});

$("#selected1").hide();
$("#selected2").hide();
$("#selected3").hide();
$("#submit").hide();
$('select#forgame').click(function () {
    $("#selected1").hide();
    $("#selected2").hide();
    $("#selected3").hide();
    $("#submit").hide();
    var game = $('select#forgame').find('option:selected').val();
    if (game == '1') {
        $("#selected1").show();
        $("#submit").show();
    } else if (game == '2') {
        $("#selected2").show();
        $("#submit").show();
    } else if (game == '3') {
        $("#selected3").show();
        $("#submit").show();
    }
});

And here is example http://jsfiddle.net/pwtmLm47/2/ Thanks

[OzRamos]

Here’s what I did: http://jsfiddle.net/OzRamos/56z5daqy/

• Used a “self-executing anonymous function” to render the intervals. If you ever have to increase the interval, you can now do this from 1 place (vs adding in a million new data sets)
• Added classes to stuff you’re autohiding with jQuery. This is now handled through CSS. You can add as many more options as you’d like now without adding more JS.
• Replaced the #selected1,2,3 ID’s with data- attributes.

This can definitely be optimized further and improved, but I don’t know what it’s actually supposed to do so I’ll leave it there for now.

[Alexander_Stiopin]

Love your way, thanks you very much!