JQuery ui.datepicker on 'select' element

Question

I have a select element with multiple dates, but I also want to give the option to select a date from datepicker, so I have the following code that displays the calendar icon next to the selection box.

<select name="birthday" > <option value="${merge0.birthday}">${merge0.birthday}</option> <option value="${merge1.birthday}">${merge1.birthday}</option> </select> <input type="hidden" id="bday_icon" /> 

Then this is my datepicker script

 $("#bday_icon").datepicker( { changeMonth: true, changeYear: true, showOn: 'button', buttonImage: 'cal/images/calendar.gif', buttonImageOnly: true, onSelect: function(dateText, inst) { var field = document.getElementsByNameByName("birthday"); var opt = document.createElement('option'); opt.text = dateText; opt.value = dateText; field.add(opt, null); } }); 

Should the onSelect function add a new option to the select html element? don't you see that this is not so?

Thanks.

Update 1:

 onSelect: function(dateText, inst) { var opt = $('<option />').attr('value', dateText).text(dateText); $('select[name=birthday]').append(opt); } 

Works great, only the comment that I needed to mark as the selected new option, so just edit as: $('<option selected/>')

Answer 1

If they are not your functions, I am not sure what .add() and getElementsByNameByName() . I can not find add in jQuery api.

Also, when working with jQuery widgets, I prefer to use jQuery selectors:

 onSelect: function(dateText, inst) { var opt = $('<option />').attr('value', dateText).text(dateText); $('select[name=birthday]').append(opt); } 

It works for me.