jQuery UI: How to add ID to combobox

I have a website with three comboboxes. I use the comobox widget for jQuery UI. I would like to be able to individually style each combox via addressing an id instead of using the nth-type selector. How can I add an id when a combobox gets initialized?

My JS:

$('#my-select-1').combobox();
$('#my-select-2').combobox();
$('#my-select-3').combobox();

Applying the comobox widget, results in the following markup:

<select id="my-select-1" style="display:none;">
<span class="custom-combobox">...</span>
<select id="my-select-2" style="display:none;">
<span class="custom-combobox">...</span>
<select id="my-select-3" style="display:none;">
<span class="custom-combobox">...</span>

JSFiddle: https://jsfiddle.net/3xkaj0ah/1/

My goal is that I can give each <span class="custom-combobox"> element an id.

Answers 1

  • Try this one.

    $('#my-select-1').combobox();
    $('#my-select-1').next('.custom-combobox').attr('id','aa');
    $('#my-select-2').combobox();
    $('#my-select-2').next('.custom-combobox').attr('id','bb');
    $('#my-select-3').combobox();
    $('#my-select-3').next('.custom-combobox').attr('id','cc');
    

Related Articles