How to append options when click first time on select tag?

Question

How to append options when click first time on select tag? That mean select tag have no option until click it first time. I try code as below but the options not show until click second time, I want the options show immediately at the first time i click select tag. Please help me.

<select id="cbVoice" onclick="ClickMe()"></select>

function ClickMe(){
if($('#cbVoice > option').length == 0){ 
var TheOptions = "<option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option>";
        $('#cbVoice').html(TheOptions);
}

}

Answer 1

Try this

function ClickMe(){
if($('#cbVoice > option').length == 0){ 
var TheOptions = "<option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option>";
        $('#cbVoice').empty().append(TheOptions);
}

}

DEMO

Answer 2

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

Duplicate of What is the best way to add options to a select from an array with jQuery?

Answer 3

Try this:

<select id="cbVoice"></select>

<script type="text/javascript">
var $cbVoice = $("#cbVoice");
$cbVoice.on('mousedown', function(e) {
    if ($('option', $cbVoice).length == 0) {
        $cbVoice.html('<option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option>');
    }
});
</script>

Demo: http://jsfiddle.net/eeSGN/

Answer 4

You could use mousedown with one(), and a simple loop for the options:

$('#cbVoice').one('mousedown', function() {
   var numOfOpts = 4, opts = [];
   for (var i = 1; i <= numOfOpts; i++) {
       opts.push( $('<option>', { text: 'Option ' + i }) );
   }
   $(this).append(opts);
});

Here's a fiddle