asked on

MultiSelect option set the style to specific select

Hi,

I am using this plug in for my multiselect.

https://github.com/ehynds/jquery-ui-multiselect-widget

the problem that I am having is that all my select by default are using the same multiselect style.

so, now my dropdown list is using multiselect-widget and i don't want that to happen to all my select

I want to specify which multiselect I can use the multiselect-widget.

How can I do that?

Thank you for your help,
Lulu

Scott Fell

Please create a test page and post a link so we can see the page with associated js and css.

lulu50

ASKER

please take a look at the attached document.

Thank you so much for your help

I couldn't do the Attach File

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="CSS\style.css" />
<link rel="stylesheet" type="text/css" href="CSS\jquery-ui.css" /> 
  <link rel="stylesheet" type="text/css" href="CSS\jquery.multiselect.css" /> 
    <link rel="stylesheet" type="text/css" href="CSS\jquery.multiselect.filter.css" /> 
<title>Untitled Document</title>


  

  
  
<script type="text/javascript" src="Script/jquery-1.10.2.min.js" ></script> 
<script type="text/javascript" src="Script/jquery-ui.min.js"></script>


  
  <script type="text/javascript" src="Script/jquery.multiselect.filter.js" ></script> 
  <script type="text/javascript" src="Script/jquery.multiselect.filter.min.js" ></script> 
  <script type="text/javascript" src="Script/jquery.multiselect.js" ></script> 
  <script type="text/javascript" src="Script/jquery.multiselect.min.js" ></script> 
  
  


<script type="text/javascript">
$(function(){

	var $callback = $("#callback");
	
	$("select").multiselect({
		click: function(event, ui){
			$callback.text(ui.value + ' ' + (ui.checked ? 'checked' : 'unchecked') );
		},
		beforeopen: function(){
			$callback.text("Select about to be opened...");
		},
		open: function(){
			$callback.text("Select opened!");
		},
		beforeclose: function(){
			$callback.text("Select about to be closed...");
		},
		close: function(){
			$callback.text("Select closed!");
		},
		checkAll: function(){
			$callback.text("Check all clicked!");
		},
		uncheckAll: function(){
			$callback.text("Uncheck all clicked!");
		},
		optgrouptoggle: function(event, ui){
			var values = $.map(ui.inputs, function(checkbox){
				return checkbox.value;
			}).join(", ");
			
			$callback.html("<strong>Checkboxes " + (ui.checked ? "checked" : "unchecked") + ":</strong> " + values);
		}
	});

});



</script>

</head>





<body>



  <!-- BEGIN left sidebar -->
<div id="lsidebar">
    <!-- begin categories -->
  <div class="box">
      <h2>SEARCH</h2>
     <div class="SubDivBox">
 <form action="" name="test" id="test" method="get"> 
    <table width="100%" border="0">
    
<!---I just want the plugin to use this select but not the other ones --->
<tr>
<td>
	<p>
		<select multiple="multiple" style="width:370px">
		<optgroup label="test">
			<option value="red">Red</option>
			<option value="green">Green</option>
			<option value="blue">Blue</option>
		</optgroup>
		<optgroup label="foo">
			<option value="orange">Orange</option>
			<option value="purple">Purple</option>
			<option value="yellow">Yellow</option>
			<option value="brown">Brown</option>
			<option value="black">Black</option>
		</optgroup>
		</select>
	</p>
 
</td>
</tr>

  <tr>
   <td>
   
    <!---I don't want the plugin to change my default select here --->
    
    <select name="RuleSetDDP" style="color:#324e67; width:155px;">
    <option></option>
      <option>hello this is a test</option>
    </select></td>
    </tr>
 
</table>

   </form>
         
     </div>
  </div>

  </div>





</body>


  
  
<script type="text/javascript">

$("select").multiselect().multiselectfilter();

</script>
</html>

Open in new window

lulu50

ASKER

I don't want my plugin to be applied to my "RuleSetDDP" select list

Scott Fell

Can't do anything without seeing how the javascript and css interact with the html. You can either post a link to your live page or create a simple test page http://sscce.org/ or recreate on a playground like jsbin or jsfiddle. If I just copy and paste what you have above to jsbin, I can't see how your js or css is working because there is no link to the actual files. http://jsbin.com/wemife/edit?html,output

ASKER CERTIFIED SOLUTION

lulu50

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Scott Fell

Spelleng, fin gner slips... it's all part of trouble shooting

lulu50

ASKER

WOW I FIXED IT !!!!!

HOW CAN THIS HAPPEN !!!!!