Minimalist Listbox - no model just DOM

Minimalist Listbox - no model just DOM

by Andy Bulka

HTML

<div id=model>
  <select id="list" size="10" style="width: 15em">
      <option>Volvo</option>
      <option>Saab</option>
      <option>Mercedes</option>
      <option>Audi</option>
  </select><br/>
</div>
<button id="plusBtn">  +  </button>
<button id="minusBtn">  -  </button>
<br/>

JavaScript

/*
Minimalist Listbox - no model just DOM
*/

function onAdd() {  
    var item = prompt('Add item:', '');
    if (item)
        $('#list').append($('<option>' + item + '</option>')); 
};

function onDelete() {
    var option = $('option:selected', 'select#list');

    if (option.length) {
        if (option.next('option').length)
            option.next('option').attr('selected', 'selected');
        else
            option.prev('option').attr('selected', 'selected');

        option.remove();
    }
};

$(function () {
    $('#plusBtn').click(function () { onAdd() });
    $('#minusBtn').click(function () { onDelete() });
});