CODEWITHSUNDEEP
jqueryjquery-chosen
user1541702
user1541702

Reputation: 141

jQuery Chosen not working

I'm trying to fancy up a select form field using the jQuery chosen() plugin, but it's not working. Here is my HTML code:

<label for='aaaaa'>First option or "Second option":</label>
<select name='aaaaa' class="chosen" id='aaaaa'>
<option>First option</option>
<option>"Second option"</option>
</select><br>

Here is my .js code:

$('.chosen').chosen();

Here are my JavaScript imports:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.js"</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript" src="../../js/jQuery.layout/jquery.layout.min.js"></script>
<script type="text/javascript" src="../../js/control_panel/controlpanel.js"></script>

Here are my CSS imports:

<link rel="stylesheet" type="text/css" media="screen" href="../../css/jQueryui/cupertino/jquery-ui-1.8.5.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../jquery.jqGrid-3.8.2/css/ui.jqgrid.css" />
<link rel="stylesheet" href="../../css/site.css" type="text/css" />
<link rel="stylesheet" href="https://raw.github.com/harvesthq/chosen/master/chosen/chosen.css" type="text/css" media="Screen" />
<link rel="icon" href="../../images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="../../images/favicon.ico" type="image/x-icon" />

I don't have a picture of how it displays on the screen, but I can describe it. There are five lines:

  1. First option or "Second option"
  2. First option (in blue and underlined, looks like an html link)
  3. (Looks like a text input field)
  4. First option (plain text, with a bullet point in front like a
  5. element
  6. "Second option" (again plain text, with a bullet point in front like a
  7. element)

Running in Mozilla Firefox.

Upvotes: 0

Views: 8355

Answers (4)

Rajat Audichya
Rajat Audichya

Reputation: 59

I believe I am replying very late but your choosen script tag has not been closed properly and the class for select should be as per your jquery code

Upvotes: 0

gorodezkiy
gorodezkiy

Reputation: 3439

I had similar issue when changed firefox user agent to iPhone's user agent. In this case chosen not rendered and the browser will show default select.

Upvotes: 0

Shalabh Aggarwal
Shalabh Aggarwal

Reputation: 390

I think the class defined in select is wrong.

It should be: chzn-select

So your code should be:

<select name='aaaaa' class="chzn-select" id='aaaaa'>

Upvotes: 2

irfandar
irfandar

Reputation: 1810

try using firebug console to see if there are any errors regarding js or css files.

Upvotes: 0

Related Questions