JOOMY.net Your slogan goes here

Please Rate Vote 1 Vote 2 Vote 3 Vote 4 Vote 5  

I. Simple select list with Select2 format

<?php
JHtml::_('formbehavior2.select2', '.test1');
?>

<select class="test1" style="width: 220px;" id="town" name="town">
	<option selected="selected" value="0"> - Please select - </option>
	<option value="1">Prague</option>
	<option value="2">Litomyšl</option>
	<option value="3">Brno</option>
	<option value="4">New York</option>
	<option value="5">San Francisco</option>
	<option value="6">Wien</option>
	<option value="7">Berlin</option>
	<option value="8">Rome</option>
	<option value="9">Venice</option>
	<option value="10">Paris</option>
	<option value="11">Barcelona</option>
	<option value="11">Madrid</option>
	<option value="11">London</option>   
</select>

II. Select2 list with images in option items

<?php
// some CSS
$this->document->addStyleDeclaration('
img.item {
    padding-right: 10px;
    vertical-align: middle;
}
img.car {
    height: 25px;
}');

// string $opt - second parameter of formbehavior2::select2
// for details http://ivaynberg.github.io/select2/
$opt = ' allowClear: true,
   width: "50%",
   formatResult: function format(state) {  if (!state.id) return state.text; return "<img class=\'item car\' src=\'media/com_test1/" + state.id.toLowerCase() + ".png\'/>" + state.text; },
   escapeMarkup: function(m) { return m; }
';

JHtml::_('formbehavior2.select2', '.test2', $opt);

// prepare data for JHtml select.genericlist
$cars = Array(
   Array('value' => 'audi', 'text' => 'Audi'),
   Array('value' => 'bmw', 'text' => 'BMW'),
   Array('value' => 'citroen', 'text' => 'Citroen'),      
   Array('value' => 'dodge', 'text' => 'Dodge'),
   Array('value' => 'fiat', 'text' => 'Fiat'),
   Array('value' => 'ford', 'text' => 'Ford'),
   Array('value' => 'chrysler', 'text' => 'Chrysler'),
   Array('value' => 'mazda', 'text' => 'Mazda'),
   Array('value' => 'nissan', 'text' => 'Nissan'),
   Array('value' => 'peugeot', 'text' => 'Peugeot'),            
   Array('value' => 'seat', 'text' => 'Seat'),
   Array('value' => 'skoda', 'text' => 'Škoda'),
   Array('value' => 'subaru', 'text' => 'Subaru'),   
   Array('value' => 'toyota', 'text' => 'Toyota')
);

$attr = array(
	'id'          => 'cars',
	'list.select' => 'bmw',
	'list.attr'   => 'class="test2" '   
);

// produce select list of "test2" class which will be Select2 formated with given options
echo JHtml::_('select.genericlist', $cars, 'cars', $attr);
?>

III. JHtml 'select.groupedlist' & select2 multiple items with image

<?php
// some CSS
$this->document->addStyleDeclaration('
img.item {
    padding-right: 10px;
    vertical-align: middle;
}

// string $opt - second parameter of formbehavior2::select2
// for details http://ivaynberg.github.io/select2/
$opt = ' allowClear: true,
   width: "70%",  
   formatResult: function format(state) {  if (!state.id) return state.text; return "<img class=\'item\' src=\'media/com_test1/" + state.id.toLowerCase() + ".png\'/>" + state.text; },
   formatSelection: function format(state) {  if (!state.id) return state.text; return "<img class=\'item\' src=\'media/com_test1/" + state.id.toLowerCase() + ".png\'/>" + state.text; },
   escapeMarkup: function(m) { return m; }
';

JHtml::_('formbehavior2.select2', '.test3', $opt);

// prepare data for JHtml select.groupedlist
$countries = Array(
   Array(
         'value' => '', 'text' => 'Afrika',
         'items' => Array(
            Array('value' => 'DZA', 'text' => 'Alžírsko'),
            Array('value' => 'AGO', 'text' => 'Angola'),
            ...
            Array('value' => 'ZMB', 'text' => 'Zambie'),
            Array('value' => 'ZWE', 'text' => 'Zimbabwe')
         )),
   Array(
         'value' => '', 'text' => 'Asie',
         'items' => Array(
            Array('value' => 'AFG', 'text' => 'Afghánistán'),
            Array('value' => 'ARM', 'text' => 'Arménie'),
            ...
            Array('value' => 'VNM', 'text' => 'Vietnam'),
            Array('value' => 'TLS', 'text' => 'Východní Timor')
         )),
   Array(
         'value' => '', 'text' => 'Austrálie a Oceánie',
         'items' => Array(
            Array('value' => 'AUS', 'text' => 'Austrálie'),
            Array('value' => 'COK', 'text' => 'Cookovy ostrovy'),
            ...
            Array('value' => 'TUV', 'text' => 'Tuvalu'),
            Array('value' => 'VUT', 'text' => 'Vanuatu')
         )),
   Array(
         'value' => '', 'text' => 'Evropa',
         'items' => Array(
            Array('value' => 'ALB', 'text' => 'Albánie'),
            Array('value' => 'BEL', 'text' => 'Belgie'),
            ...
            Array('value' => 'UKR', 'text' => 'Ukrajina'),
            Array('value' => 'VAT', 'text' => 'Vatikán')
         )),
   Array(
         'value' => '', 'text' => 'Jižní Amerika',
         'items' => Array(
            Array('value' => 'ARG', 'text' => 'Argentina'),
            Array('value' => 'BOL', 'text' => 'Bolívie'),
            ...
            Array('value' => 'URY', 'text' => 'Uruguay'),
            Array('value' => 'VEN', 'text' => 'Venezuela')
         )),
   Array(
         'value' => '', 'text' => 'Severní Amerika',
         'items' => Array(
            Array('value' => 'AIA', 'text' => 'Anguilla'),
            Array('value' => 'BHS', 'text' => 'Bahamy'),
            ...
            Array('value' => 'TTO', 'text' => 'Trinidad a Tobago'),
            Array('value' => 'USA', 'text' => 'USA')
         ))                  
);

$attr = array(
	'id'          => 'countries',
	'list.attr'   => 'class="test3" multiple '   
);
// produce select list of "test3" class and multiple attribute which will be Select2 formated with given options
JHtml::_('select.groupedlist', $countries, 'countries', $attr); ?>
?>

• Prev