Dropdownlist hide

by deostroll

HTML

<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<select id='myoptions'></select>
<br/>
<br/>Hide:
<br/>
<div class="form-inline">
    <select id="ctrls"></select>
    <input type="button" class="btn btn-default" value="Go" id="btnhide" />
</div>

JavaScript

var data = {
    'foo1': 'bar1',
        'foo2': 'bar2',
        'foo3': 'bar3',
        'foo4': 'bar4',
        'foo5': 'bar5'
};

$(function () {
    var $sel = $('#myoptions');
    var $sel2 = $('#ctrls');
    $.each(data, function (idx, val) {
        var opt = document.createElement('option');
        opt.value = val;
        opt.innerHTML = idx;
        $sel.append(opt);
        $sel2.append($(opt).clone());
    });
    $('#btnhide').click(function () {
        var val = $sel2.val();
        $sel.find('option').show();
        $sel.find('option[value=' + val + ']').hide();
    });
});