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
lulu50Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Please create a test page and post a link so we can see the page with associated js and css.
lulu50Author Commented:
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

lulu50Author Commented:
I don't want my plugin to be applied to my "RuleSetDDP" select list
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
lulu50Author Commented:
Scott,

I found the issue and fixed it.

$('#test).multiselect().multiselectfilter();

instead of

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

Thank you for trying to help .

Lulu

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Spelleng, fin gner slips... it's all part of trouble shooting
lulu50Author Commented:
WOW I FIXED IT !!!!!

HOW CAN THIS HAPPEN !!!!!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.