overflowstack9 overflowstack9 - 4 months ago 12
HTML Question

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>




Answer

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>