Compare options in Select

Compare options in two different selects. Append missing options to one of the selects

by Phil Glau

HTML

Dialog Style
<select name="new_style" id="new_style">
    <option value="S">Type-1</option>
    <option value="V" selected="">Type-2</option>
    <option value="FG">Type-3</option>
    <option value="RAW">Reality TV</option>
    <option value="RAWT">Reality w/TC</option>
    <option value="DC">Lite Cont.</option>
    <option value="DCT">Lite Cont. w/TC</option>
    <option value="bad">Bad</option>
</select><p>
Original Style
<select name="style_1234" id="style_1234">
    <option value="S">Type-1</option>
    <option value="V" selected="">Type-2</option>
    <option value="FG">Type-3</option>
    <option value="RAW">Reality TV</option>
    <option value="RAWT">Reality w/TC</option>
    <option value="DC">Lite Cont.</option>
    <option value="DCT">Lite Cont. w/TC</option>
    <option value="bad">Bad</option>
    <option value="c_12">Captions</option>
</select></p>

JavaScript

var item_styles = {};
var base_styles = {}
$("#style_1234 option").each(function () {
    item_styles[$(this).val()] = $(this).html();
});

$("#new_style option").each(function () {
    base_styles[$(this).val()] = $(this).html();

});
//console.log(item_styles);
//console.log(base_styles);

$.each(item_styles, function(key, value) {
    if(!base_styles.hasOwnProperty(key)) {
        console.log('key = ',key, 'value = ',value);
        $("#new_style").append($('<option>', { value : key }).text(value)); 
    }
});