CODEWITHSUNDEEP
javascriptjqueryhtmljquery-chosen
espresso_coffee
espresso_coffee

Reputation: 6110

JQuery chosen did not show search box?

I have a form with few fields that should use drop down chosen. I have created a class on each select tag. This class is used to apply chosen on each element. I'm not getting any errors once a form is loaded but chosen doesn't work. Only what is displayed on the screen is this:

Chosen Image: https://i.sstatic.net/TQEK5.png

Here is my code:

<form name="frmDemo" id="frmDemo" method="POST" action="#" class="frmLayout">
    <fieldset>
    <legend>Demographic</legend>
        <div class="formItem">
            <label for="city" class="required">City:</label>
            <select name="city" id="city" class="chosen">
                <option value="">Choose City</option>
                <cfoutput query="getCity">
                    <option value="#cityNum#">#cityName#</option>
                </cfoutput>
            </select>
        </div>
        <div class="formItem">
            <p align="center"><input type="button" name="chSubmit" id="chSubmit" value="Submit"></p>
        </div>
    </fieldset>
</form>

Here is JQuery:

$(document).ready(function() {
    $('.chosen').each(function(){
        $(this).chosen();
    });
});

Upvotes: 2

Views: 1631

Answers (1)

Dalin Huang
Dalin Huang

Reputation: 11342

Should be your reference not set up properly, use the following:

Load CSS -> jQuery -> chosen

<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>


$(document).ready(function() {
  $('.chosen').each(function() {
    $(this).chosen();
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>

<form name="frmDemo" id="frmDemo" method="POST" action="#" class="frmLayout">
  <fieldset>
    <legend>Demographic</legend>
    <div class="formItem">
      <label for="city" class="required">City:</label>
      <select name="city" id="city" class="chosen">
        <option value="">Choose City</option>
        <cfoutput query="getCity">
          <option value="#cityNum#">#cityName#</option>
        </cfoutput>
      </select>
    </div>
    <div class="formItem">
      <p align="center">
        <input type="button" name="chSubmit" id="chSubmit" value="Submit">
      </p>
    </div>
  </fieldset>
</form>

Upvotes: 1

Related Questions