javascript - Make first option of select unselectable through arrow keys in Google Chrome -

i have select options , when user selects option, removed select , displayed button. when button pressed, option goes select. works fine mouse click, if navigate arrows key, user can select first option "choose fruit". how make unselectable? disabled="disabled" doesn't work. here's jsfiddle http://jsfiddle.net/gbjcw1wp/2/. reproduce problem, select fruit, press arrow key on keyboard.

edit : happens in google chrome.

disabling arrow keys work, i'd way of accomplishing this.

html:

<select id="combobox" onchange="cbchange();">     <option selected="selected">choose fruit</option>     <option value="apple">apple</option>     <option value="pear">pear</option>     <option value="orange">orange</option>     <option value="banana">banana</option> </select>     <br>     <br>  <div id="buttons"></div> 

javascript :

var fieldnames = []; var valuenames = [];   function sortcombobox() {     document.getelementbyid("combobox").remove(0);     var my_options = $("#combobox option");     my_options.sort(function (a, b) {         if (a.text.touppercase() > b.text.touppercase()) return 1;         if (a.text.touppercase() < b.text.touppercase()) return -1;     return 0;     });     $("#combobox").empty().append('<option>choose fruit</option>').append(my_options);     $('#combobox option:first-child').attr("selected", "selected"); }   function cbchange() {     var index = $('#combobox').get(0).selectedindex;     var text = $('#combobox option:selected').text();     var selecteditem = $('#combobox').val();     $('#buttons').append('<table class="ui"><tr><td class="variable">' + text + '</td><td class="icon"><span id="' + selecteditem + '" class="icon ui" value="x" onclick="addoption(\'' + text + '\',this.id)">x</span></td></tr></table>');     $('#combobox option:eq(' + index + ')').remove();     fieldnames.push(text);     valuenames.push(selecteditem); } function addoption(text, selecteditem) {     (var = valuenames.length - 1; >= 0; i--) {         if (valuenames[i] === selecteditem) {             valuenames.splice(i, 1);             fieldnames.splice(i, 1);         }     }     $("#combobox").append($("<option></option>").val(selecteditem).text(text));     $('#' + selecteditem).parent().parent().parent().parent().remove();     sortcombobox(); } 

a simple change code can resolve problem.

give default option weird value. eg:

<option value="null" selected="selected">choose fruit</option> 

and append follow code the start of cbchange() function.

if($('#combobox').val()=="null"){         return false;     } 

see jsfiddle example