I'm currently trying to create a button that allows me to group options based on an attribute. Since I'm no jquery wiz, I took the existing and working button "Add-all" and started modifying it in order to add only the options with a certain attribute. The following code is that intent...
this.container.find(".remove-all").click(function() {
that._populateLists(that.element.find('option').removeAttr('selected'));
return false;
});
this.container.find(".add-all").click(function() {
var options = that.element.find('option').not(":selected");
if (that.availableList.children('li:hidden').length > 1) {
that.availableList.children('li').each(function(i) {
if (jQuery(this).is(":visible")) jQuery(options[i - 1]).attr('selected', 'selected');
});
} else {
options.attr('selected', 'selected');
}
that._populateLists(that.element.find('option'));
return false;
});
this.container.find(".add-auto").click(function() {
var options = that.element.find('option').not(":selected");
if (that.availableList.children('li:hidden').length > 1) {
that.availableList.children('li').each(function(i) {
if (jQuery(this).is(":visible") && jQuery(this).has.class("auto")) jQuery(options[i - 1]).attr('selected', 'selected');
});
} else {
that.availableList.children('li').each(function(i) {
if (jQuery(this).has.class("auto")) jQuery(options[i - 1]).attr('selected', 'selected');
});
}
that._populateLists(that.element.find('option'));
return false;
});
},
I'm currently using the has.class in order to look for the attribute that i want. In this case , auto. But it's not working. I'm trying to fix the code shown on top, in order to call the attribute "auto". the label = "'+ option.attr('class')+'"
is the code that generates the lable = "auto" in html.
_getOptionNode: function(option) {
option = jQuery(option);
var node = jQuery('<li class="ui-state-default ui-element " title="' + option.text() + '" data-selected-value="' + option.val() + '" label = "' + option.attr('class') + '" ><span class="ui-icon"/>' + option.text() + '<a href="#" class="action"><span class="ui-corner-all ui-icon"/></a></li>').hide();
node.data('optionLink', option);
return node;
},
Below there is an image that shows the user interface. When I inspect the AUTO: option , i have the following code...
<li class="ui-state-default ui-element ui-draggable ui-draggable-handle" title="AUTO: Car Dealers - New Cars (CARD_NEW)" data-selected-value="82" industry="auto'" style=""><span class="ui-helper-hidden"></span>AUTO: Car Dealers - New Cars (CARD_NEW)<a href="#" class="action"><span class="ui-corner-all ui-icon ui-icon-plus"></span></a></li>
I want my Add auto button to be able to move all industry = "auto" options to the left.