Dropdown list (drop-down list)

The first example creates a standard drop down list.
The second example shows how to populate the drop down list with values from a database.
The third example shows a standard country list (hmmm ? hope your country is in the list)

Example 1: standard html drop down list.

<form method="post"action="next_page.cfm">
  <select size="1"name="fovorite_pet">
    <option>Select your favorite pet:</option>
    <option value="Pig">Pig</option>
    <option value="Bird">Bird</option>
    <option value="Fish">Fish</option>
    <option value="Cat">Cat</option>
    <option value="Dog">Dog</option>
    <option value="Rabbit">Rabbit</option>
  </select>
  <input name="Submit" type="submit"value="Favorite Pet" />
</form>

Let's take a closer look at the FORM tag:

ACTION is the page where you will send the results of your selection.

Inside the FORM tag we have the SELECT tag:

NAME is the name of the variable being posted.
OPTION... VALUE is the value of the variable being sent.
Example:
<OPTION VALUE="Fish">Fish</OPTION>

Fish will be sent and 'Fish' is what the drop down list display.
 
The next_page.cfm receives your favorite pet in the variable fovorite_pet.

<cfoutput>#fovorite_pet#</cfoutput>

Example 2: ColdFusion drop-down list from a database.

After creating the database, crate a query like this:

<CFQUERY NAME=" q_name" DATASOURCE=" dsn_name">

SELECT * FROM PetList

</CFQUERY>

 

The output of the query is stated within the form:

<FORM METHOD="POST" ACTION="nextpage.cfm">

<SELECT NAME="fovorite_pet">

<OPTION>Select an item</OPTION>

<CFOUTPUT QUERY=" q_name ">

<OPTION VALUE="#pet_name#">#pet_name#</OPTION>

</CFOUTPUT>

</SELECT>

<INPUT TYPE="submit" VALUE="Submit favorite pet">

</FORM>

 

The cfoutput query tag must have the same name as the name of the query.

Note the location of <CFOUTPUT>. If it is located anywhere else, you will get unusual results.

Ok, everything ok so far. But what happens if the user clicking the submit button without selecting?
One solution to this is to set the VALUE of that option to some default value.

Example 3: Country dropdown list.

<Select> United States Afghanistan Albania Algeria American Samoa Andorra Angola Anguilla Antarctica Antigua Argentina Armenia Aruba Australia Austria Azerbaijan Bahamas Bahrain Bangladesh Barbados Barbuda Belarus Belgium Belize Benin Bermuda Bhutan Bolivia Bosnia & Herzegowina Botswana Bouvet Island Brazil British Indian Ocean Terr. Brunei Darussalam Bulgaria Burkina Faso Burma (Myanmar) Burundi Cambodia Cameroon Canada Cape Verde Cayman Islands Central African Rep Chad Chile China Christmas Island Cocos (Keeling) Isles Colombia Comoros Congo Congo,The Democratic Rep Cook Islands Costa Rica Croatia Cuba Cyprus Czech Republic Denmark Djibouti Dominica Dominican Republic East Timor Ecuador Egypt El Salvador Equatorial Guinea Eritrea Estonia Ethiopia Falkland Islands (Malvinas) Faroe Islands Fiji Finland France France, Metro French Guiana French Polynesia French Southern Terr. Gabon Gambia Georgia Germany Ghana Gibraltar Greece Greenland Grenada Guadeloupe Guam Guatemala Guinea Guinea-Bissau Guyana Haiti Heard And Mc Donald Isles Holy See (Vatican) Honduras Hong Kong Hungary Iceland India Indonesia Iran Iraq Ireland Israel Italy Ivory Coast (Cote D'Ivoire) Japan Jordan Kazakhstan Kenya Kiribati Korea Dem People's Rep Korea Republic Of Kuwait Kyrgyzstan Laos Latvia Lebanon Lesotho Liberia Libya Liechtenstein Lithuania Luxembourg Macau Macedonia(Republic of) Madagascar Malawi Malaysia Maldives Mali Malta Marshall Islan Martiniqueds Martinique Mauritania Mauritius Mayotte Mexico Micronesia Fed States Moldova Rep Monaco Mongolia Montserrat Morocco Mozambique Namibia Nauru Nepal Netherlands Netherlands Antilles New Caledonia New Zealand Nicaragua Niger Nigeria Niue Norfolk Island Northern Mariana Isles Norway Oman Pakistan Palau Panama Papua New Guinea Paraguay Peru Philippines Pitcairn Poland Portugal Puerto Rico Qatar Reunion Romania Russian Federation Rwanda Saint Kitts & Nevis Saint Lucia Saint Vincent & Grenadines Samoa San Marino Sao Tome & Principe Saudi Arabia Senegal Seychelles Sierra Leona Singapore Slovakia (Slovak Rep) Slovenia Solomon Islands Somalia South Africa Georgia & Sandwich Isles ESPSpain Sri Lanka St. Helena St. Pierre & Miquelon Sudan Suriname Svalbard & Jan Mayen Islands Swaziland Sweden Switzerland Syria Taiwan Tajikistan Tanzania Thailand Togo Tokelau Tonga Trinidad & Tobago Tunisia Turkey Turkmenistan Turks & Caicos Islands Tuvalu Uganda Ukraine United Arab Emirates United Kingdom Minor Outlying Isles Uruguay Uzbekistan Vanuatu Venezuela Viet Nam Virgin Isles (British) Virgin Isles (U.S.) Wallis & Futuna Islands Western Sahara Yemen Yugoslavia Zambia Zimbabwe Other

<form id="form1" name="form1" method="post" action="">
  <select name="select">
    <option value="unselected"> &lt;Select&gt;</option>
    <option value="United States"> United States</option>
    <option value="Afghanistan"> Afghanistan</option>
    <option value="Albania"> Albania</option>
    <option value="Algeria"> Algeria</option>
    <option value="American Samoa"> American Samoa</option>
    <option value="Andorra"> Andorra</option>
    <option value="Angola"> Angola</option>
    <option value="Anguilla"> Anguilla</option>
    <option value="Antarctica"> Antarctica</option>
    <option value="Antigua"> Antigua</option>
    <option value="Argentina"> Argentina</option>
    <option value="Armenia"> Armenia</option>
    <option value="Aruba"> Aruba</option>
    <option value="Australia"> Australia</option>
    <option value="Austria"> Austria</option>
    <option value="Azerbaijan"> Azerbaijan</option>
    <option value="Bahamas"> Bahamas</option>
    <option value="Bahrain"> Bahrain</option>
    <option value="Bangladesh"> Bangladesh</option>
    <option value="Barbados"> Barbados</option>
    <option value="Barbuda"> Barbuda</option>
    <option value="Belarus"> Belarus</option>
    <option value="Belgium"> Belgium</option>
    <option value="Belize"> Belize</option>
    <option value="Benin"> Benin</option>
    <option value="Bermuda"> Bermuda</option>
    <option value="Bhutan"> Bhutan</option>
    <option value="Bolivia"> Bolivia</option>
    <option value="Bosnia &amp; Herzegowina"> Bosnia &amp; Herzegowina</option>
    <option value="Botswana"> Botswana</option>
    <option value="Bouvet Island"> Bouvet Island</option>
    <option value="Brazil"> Brazil</option>
    <option value="British Indian Ocean Terr"> British Indian Ocean Terr.</option>
    <option value="Brunei Darussalam"> Brunei Darussalam</option>
    <option value="Bulgaria"> Bulgaria</option>
    <option value="Burkina Faso"> Burkina Faso</option>
    <option value="Burma (Myanmar)"> Burma (Myanmar)</option>
    <option value="Burundi"> Burundi</option>
    <option value="Cambodia"> Cambodia</option>
    <option value="Cameroon"> Cameroon</option>
    <option value="Canada"> Canada</option>
    <option value="Cape Verde"> Cape Verde</option>
    <option value="Cayman Islands"> Cayman Islands</option>
    <option value="Central African Rep"> Central African Rep</option>
    <option value="Chad"> Chad</option>
    <option value="Chile"> Chile</option>
    <option value="China"> China</option>
    <option value="Christmas Island"> Christmas Island</option>
    <option value="Cocos (Keeling) Isles"> Cocos (Keeling) Isles</option>
    <option value="Colombia"> Colombia</option>
    <option value="Comoros"> Comoros</option>
    <option value="Congo"> Congo</option>
    <option value="Congo, The Democratic Rep"> Congo,The Democratic Rep</option>
    <option value="Cook Islands"> Cook Islands</option>
    <option value="Costa Rica"> Costa Rica</option>
    <option value="Croatia"> Croatia</option>
    <option value="Cuba"> Cuba</option>
    <option value="Cyprus"> Cyprus</option>
    <option value="Czech Republic"> Czech Republic</option>
    <option value="Denmark"> Denmark</option>
    <option value="Djibouti"> Djibouti</option>
    <option value="Dominica"> Dominica</option>
    <option value="Dominican Republic"> Dominican Republic</option>
    <option value="East Timor"> East Timor</option>
    <option value="Ecuador"> Ecuador</option>
    <option value="Egypt"> Egypt</option>
    <option value="El Salvador"> El Salvador</option>
    <option value="Equatorial Guinea"> Equatorial Guinea</option>
    <option value="Eritrea"> Eritrea</option>
    <option value=" Estonia"> Estonia</option>
    <option value="Ethiopia"> Ethiopia</option>
    <option value="Falkland Islands (Malvinas)"> Falkland Islands (Malvinas)</option>
    <option value="Faroe Islands"> Faroe Islands</option>
    <option value="Fiji"> Fiji</option>
    <option value="Finland"> Finland</option>
    <option value="France"> France</option>
    <option value="France, Metro"> France, Metro</option>
    <option value="French Guiana"> French Guiana</option>
    <option value="French Polynesia"> French Polynesia</option>
    <option value="French Southern Terr."> French Southern Terr.</option>
    <option value="Gabon"> Gabon</option>
    <option value="Gambia"> Gambia</option>
    <option value="Georgia"> Georgia</option>
    <option value="Germany"> Germany</option>
    <option value="Ghana"> Ghana</option>
    <option value="Gibraltar"> Gibraltar</option>
    <option value="Greece "> Greece</option>
    <option value="Greenland"> Greenland</option>
    <option value="Grenada"> Grenada</option>
    <option value="Guadeloupe"> Guadeloupe</option>
    <option value="Guam"> Guam</option>
    <option value="Guatemala"> Guatemala</option>
    <option value="Guinea"> Guinea</option>
    <option value="Guinea-Bissau"> Guinea-Bissau</option>
    <option value="Guyana"> Guyana</option>
    <option value="Haiti"> Haiti</option>
    <option value="Heard And Mc Donald Isles"> Heard And Mc Donald Isles</option>
    <option value="Holy See (Vatican)"> Holy See (Vatican)</option>
    <option value="Honduras"> Honduras</option>
    <option value="Hong Kong"> Hong Kong</option>
    <option value="Hungary"> Hungary</option>
    <option value="Iceland"> Iceland</option>
    <option value="India"> India</option>
    <option value="Indonesia"> Indonesia</option>
    <option value="Iran"> Iran</option>
    <option value="Iraq"> Iraq</option>
    <option value="Ireland"> Ireland</option>
    <option value="Israel"> Israel</option>
    <option value="Italy"> Italy</option>
    <option value="Ivory Coast (Cote D'Ivoire)"> Ivory Coast (Cote D'Ivoire)</option>
    <option value="Japan"> Japan </option>
    <option value="Jordan"> Jordan </option>
    <option value="Kazakhstan"> Kazakhstan</option>
    <option value="Kenya"> Kenya</option>
    <option value="Kiribati"> Kiribati</option>
    <option value="Korea Dem People's Rep"> Korea Dem People's Rep</option>
    <option value="Korea Republic Of"> Korea Republic Of</option>
    <option value="Kuwait"> Kuwait</option>
    <option value="Kyrgyzstan"> Kyrgyzstan</option>
    <option value="Laos"> Laos</option>
    <option value="Latvia"> Latvia</option>
    <option value="Lebanon"> Lebanon</option>
    <option value="Lesotho"> Lesotho</option>
    <option value="Liberia"> Liberia</option>
    <option value="Libya"> Libya</option>
    <option value="Liechtenstein"> Liechtenstein</option>
    <option value="Lithuania"> Lithuania</option>
    <option value="Luxembourg"> Luxembourg</option>
    <option value="Macau"> Macau</option>
    <option value="Macedonia(Republic of)"> Macedonia(Republic of)</option>
    <option value="Madagascar"> Madagascar</option>
    <option value="Malawi"> Malawi</option>
    <option value="Malaysia"> Malaysia</option>
    <option value="Maldives"> Maldives</option>
    <option value="Mali"> Mali</option>
    <option value="Malta"> Malta</option>
    <option value="Marshall Islan Martiniqueds"> Marshall Islan Martiniqueds</option>
    <option value="Martinique"> Martinique</option>
    <option value="Mauritania"> Mauritania</option>
    <option value="Mauritius"> Mauritius</option>
    <option value="Mayotte"> Mayotte</option>
    <option value="Mexico"> Mexico</option>
    <option value="Micronesia Fed States"> Micronesia Fed States</option>
    <option value="Moldova Rep"> Moldova Rep</option>
    <option value="Monaco"> Monaco</option>
    <option value="Mongolia"> Mongolia</option>
    <option value="Montserrat"> Montserrat</option>
    <option value="Morocco"> Morocco</option>
    <option value="Mozambique"> Mozambique</option>

Advertisement

No User Comments.

No User Comments, be the first one to write your comments?