How to get CJuiSelectable selected value?

I have the code for the CJuiSelectable and is shown correctly the problem is how to get the selected value, on the CJuiSelectable htmlOptions->name or on a hidden field of the form.

Any help?

Looks the CJuiSelectable is not used too much as there are only 3 posts about this widget.

Does it work?


This widget is faithful to the configuration of the respective jQueryUI. Try this:

$this->widget('zii.widgets.jui.CJuiSelectable', array(

		'itemTemplate'=>'<li class="ui-widget-content" id="{id}">{content}</li>',


		    'id1'=>'Item 1',

		    'id2'=>'Item 2',

		    'id3'=>'Item 3',


		// additional javascript options for the selectable plugin


		    'selected'=>'js:function(event, ui) { alert( $(ui.selected).attr("id") ); }'







You should add some CSS code (customize it to fit your needs) to your view or main CSS file:


.feedback { font-size: 1.4em; }

.ui-selecting { background: #FECA40; }

.ui-selectable .ui-selected { background: #F39814; color: white; }

.ui-selectable { list-style-type: none; margin: 0; padding: 0; width: 200px; }

.ui-selectable li { margin: 3px; padding: 4px; font-size: 12px; height: 14px; }


This example popup an alert when an item is selected. You can replace that js function with your favourite ajax code.

Aged post with some useful information is here