CODEWITHSUNDEEP
jqueryhtmlcss
overflowstack9
overflowstack9

Reputation: 345

How to assign id to the select tags

I have implemented comobox but my problem is i want to implement two combobox for my project and i want to assign the different ids for them like this <select id="size1" . how can the assign id to this <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6"> and if i assign id to the select tags in html how can i do this same in the jquery code $(".chosen-select").chosen();

should i change the jquery code if i add the id to select tags?

Below is my code

$(function(){
    $(".chosen-select").chosen();
});
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
<div>
          <em>Multiple Select with Groups</em><br />
          <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
            <option value="" />
            <optgroup label="NFC EAST">
              <option />Dallas Cowboys
              <option />New York Giants
              <option />Philadelphia Eagles
              <option />Washington Redskins
            </optgroup>
            <optgroup label="NFC NORTH">
              <option />Chicago Bears
              <option />Detroit Lions
              <option />Green Bay Packers
              <option />Minnesota Vikings
            </optgroup>
            <optgroup label="NFC SOUTH">
              <option />Atlanta Falcons
              <option />Carolina Panthers
              <option />New Orleans Saints
              <option />Tampa Bay Buccaneers
            </optgroup>
            <optgroup label="NFC WEST">
              <option />Arizona Cardinals
              <option />St. Louis Rams
              <option />San Francisco 49ers
              <option />Seattle Seahawks
            </optgroup>
            <optgroup label="AFC EAST">
              <option />Buffalo Bills
              <option />Miami Dolphins
              <option />New England Patriots
              <option />New York Jets
            </optgroup>
            <optgroup label="AFC NORTH">
              <option />Baltimore Ravens
              <option />Cincinnati Bengals
              <option />Cleveland Browns
              <option />Pittsburgh Steelers
            </optgroup>
            <optgroup label="AFC SOUTH">
              <option />Houston Texans
              <option />Indianapolis Colts
              <option />Jacksonville Jaguars
              <option />Tennessee Titans
            </optgroup>
            <optgroup label="AFC WEST">
              <option />Denver Broncos
              <option />Kansas City Chiefs
              <option />Oakland Raiders
              <option />San Diego Chargers
            </optgroup>
          </select>
        </div>

Upvotes: 1

Views: 626

Answers (2)

Mukesh Ram
Mukesh Ram

Reputation: 6338

You can set id on select tag.

In HTML Like this:

<select id="size1" data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6"></select>

<select id="size2" data-placeholder="Team 2" style="width:350px;" class="chosen-select" multiple tabindex="6"></select>

In jquery you can call this ID like this:

$(function(){
    $("#size1").chosen();
    $("#size2").chosen();
});

Upvotes: 1

kukkuz
kukkuz

Reputation: 42360

That was trivial. This is what you expected?

$(function(){
    $("#select1").chosen();
    $("#select2").chosen();
});
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
<div>
          <em>Multiple Select with Groups</em><br />
          <select id="select1" data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
            <option value="" />
            <optgroup label="NFC EAST">
              <option />Dallas Cowboys
              <option />New York Giants
              <option />Philadelphia Eagles
              <option />Washington Redskins
            </optgroup>
            <optgroup label="NFC NORTH">
              <option />Chicago Bears
              <option />Detroit Lions
              <option />Green Bay Packers
              <option />Minnesota Vikings
            </optgroup>
            <optgroup label="NFC SOUTH">
              <option />Atlanta Falcons
              <option />Carolina Panthers
              <option />New Orleans Saints
              <option />Tampa Bay Buccaneers
            </optgroup>
            <optgroup label="NFC WEST">
              <option />Arizona Cardinals
              <option />St. Louis Rams
              <option />San Francisco 49ers
              <option />Seattle Seahawks
            </optgroup>
            <optgroup label="AFC EAST">
              <option />Buffalo Bills
              <option />Miami Dolphins
              <option />New England Patriots
              <option />New York Jets
            </optgroup>
            <optgroup label="AFC NORTH">
              <option />Baltimore Ravens
              <option />Cincinnati Bengals
              <option />Cleveland Browns
              <option />Pittsburgh Steelers
            </optgroup>
            <optgroup label="AFC SOUTH">
              <option />Houston Texans
              <option />Indianapolis Colts
              <option />Jacksonville Jaguars
              <option />Tennessee Titans
            </optgroup>
            <optgroup label="AFC WEST">
              <option />Denver Broncos
              <option />Kansas City Chiefs
              <option />Oakland Raiders
              <option />San Diego Chargers
            </optgroup>
          </select>
        </div> 

 <div>
          <em>Multiple Select with Groups</em><br />
          <select id="select2" data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
            <option value="" />
            <optgroup label="NFC EAST">
              <option />Dallas Cowboys
              <option />New York Giants
              <option />Philadelphia Eagles
              <option />Washington Redskins
            </optgroup>
            <optgroup label="NFC NORTH">
              <option />Chicago Bears
              <option />Detroit Lions
              <option />Green Bay Packers
              <option />Minnesota Vikings
            </optgroup>
            <optgroup label="NFC SOUTH">
              <option />Atlanta Falcons
              <option />Carolina Panthers
              <option />New Orleans Saints
              <option />Tampa Bay Buccaneers
            </optgroup>
            <optgroup label="NFC WEST">
              <option />Arizona Cardinals
              <option />St. Louis Rams
              <option />San Francisco 49ers
              <option />Seattle Seahawks
            </optgroup>
            <optgroup label="AFC EAST">
              <option />Buffalo Bills
              <option />Miami Dolphins
              <option />New England Patriots
              <option />New York Jets
            </optgroup>
            <optgroup label="AFC NORTH">
              <option />Baltimore Ravens
              <option />Cincinnati Bengals
              <option />Cleveland Browns
              <option />Pittsburgh Steelers
            </optgroup>
            <optgroup label="AFC SOUTH">
              <option />Houston Texans
              <option />Indianapolis Colts
              <option />Jacksonville Jaguars
              <option />Tennessee Titans
            </optgroup>
            <optgroup label="AFC WEST">
              <option />Denver Broncos
              <option />Kansas City Chiefs
              <option />Oakland Raiders
              <option />San Diego Chargers
            </optgroup>
          </select>
        </div>

Upvotes: 1

Related Questions