mdl-select-component
Version:
mdl-selectfield for material-design-lite
614 lines • 52.8 kB
HTML
<html>
<head>
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<script rel="stylesheet" src="mdl-selectfield.min.js"></script>
<link rel="stylesheet" href="mdl-selectfield.min.css">
<link rel="shortcut icon" href="/assets/favicon.png">
</head>
<body>
<div class="mdl-layout__container">
<div class="mdl-layout mdl-js-layoutmdl-layout--fixed-drawermdl-layout--fixed-header">
<main class="mdl-layout__content mdl-color--grey-100">
<form id="my_form" action="#" class="mdl-grid">
<div class="mdl-color--whitemdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<!-- Simple Selectfield -->
<div id="select_country" class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label">
<select id="profile_information_form_country_id" name="profile_information_form_country" class="mdl-selectfield__select">
<option value=""></option>
<option value="192">Abkhazia</option>
<option value="1">Afghanistan</option>
<option value="255" disabled>Aland</option>
<option value="2">Albania</option>
<option value="3" disabled="disabled">Algeria</option>
<option value="235">American Samoa</option>
<option value="4">Andorra</option>
<option value="5" selected>Angola</option>
<option value="220">Anguilla</option>
<option value="261">Antarctica</option>
<option value="6">Antigua and Barbuda</option>
<option value="7">Argentina</option>
<option value="8">Armenia</option>
<option value="256">Aruba</option>
<option value="259">Ascension</option>
<option value="198">Ashmore and Cartier Islands</option>
<option value="9">Australia</option>
<option value="265">Australian Antarctic Territory</option>
<option value="10">Austria</option>
<option value="11">Azerbaijan</option>
<option value="12">Bahamas</option>
<option value="13">Bahrain</option>
<option value="236">Baker Island</option>
<option value="14">Bangladesh</option>
<option value="15">Barbados</option>
<option value="16">Belarus</option>
<option value="17">Belgium</option>
<option value="18">Belize</option>
<option value="19">Benin</option>
<option value="221">Bermuda</option>
<option value="20">Bhutan</option>
<option value="21">Bolivia</option>
<option value="22">Bosnia and Herzegovina</option>
<option value="23">Botswana</option>
<option value="213">Bouvet Island</option>
<option value="24">Brazil</option>
<option value="269">British Antarctic Territory</option>
<option value="222">British Indian Ocean Territory</option>
<option value="223">British Sovereign Base Areas</option>
<option value="224">British Virgin Islands</option>
<option value="25">Brunei</option>
<option value="26">Bulgaria</option>
<option value="27">Burkina Faso</option>
<option value="28">Burundi</option>
<option value="29">Cambodia</option>
<option value="30">Cameroon</option>
<option value="31">Canada</option>
<option value="32">Cape Verde</option>
<option value="225">Cayman Islands</option>
<option value="33">Central African Republic</option>
<option value="34">Chad</option>
<option value="35">Chile</option>
<option value="36">China</option>
<option value="199">Christmas Island</option>
<option value="212">Clipperton Island</option>
<option value="200">Cocos (Keeling) Islands</option>
<option value="37">Colombia</option>
<option value="38">Comoros</option>
<option value="39">Congo</option>
<option value="214">Cook Islands</option>
<option value="201">Coral Sea Islands</option>
<option value="40">Costa Rica</option>
<option value="41">Cote d'Ivoire (Ivory Coast)</option>
<option value="42">Croatia</option>
<option value="43">Cuba</option>
<option value="44">Cyprus</option>
<option value="45">Czech Republic</option>
<option value="46">Denmark</option>
<option value="47">Djibouti</option>
<option value="48">Dominica</option>
<option value="49">Dominican Republic</option>
<option value="50">Ecuador</option>
<option value="51">Egypt</option>
<option value="52">El Salvador</option>
<option value="53">Equatorial Guinea</option>
<option value="54">Eritrea</option>
<option value="55">Estonia</option>
<option value="56">Ethiopia</option>
<option value="226">Falkland Islands (Islas Malvinas)</option>
<option value="249">Faroe Islands</option>
<option value="57">Fiji</option>
<option value="58">Finland</option>
<option value="59">France</option>
<option value="251">French Guiana</option>
<option value="205">French Polynesia</option>
<option value="211">French Southern and Antarctic Lands</option>
<option value="60">Gabon</option>
<option value="61">Gambia</option>
<option value="62">Georgia</option>
<option value="63">Germany</option>
<option value="64">Ghana</option>
<option value="227">Gibraltar</option>
<option value="65">Greece</option>
<option value="250">Greenland</option>
<option value="66">Grenada</option>
<option value="252">Guadeloupe</option>
<option value="237">Guam</option>
<option value="67">Guatemala</option>
<option value="217">Guernsey</option>
<option value="68">Guinea</option>
<option value="69">Guinea-Bissau</option>
<option value="70">Guyana</option>
<option value="71">Haiti</option>
<option value="202">Heard Island and McDonald Islands</option>
<option value="72">Honduras</option>
<option value="247">Hong Kong</option>
<option value="238">Howland Island</option>
<option value="73">Hungary</option>
<option value="74">Iceland</option>
<option value="75">India</option>
<option value="76">Indonesia</option>
<option value="77">Iran</option>
<option value="78">Iraq</option>
<option value="79">Ireland</option>
<option value="218">Isle of Man</option>
<option value="80">Israel</option>
<option value="81">Italy</option>
<option value="82">Jamaica</option>
<option value="83">Japan</option>
<option value="239">Jarvis Island</option>
<option value="219">Jersey</option>
<option value="240">Johnston Atoll</option>
<option value="84">Jordan</option>
<option value="85">Kazakhstan</option>
<option value="86">Kenya</option>
<option value="241">Kingman Reef</option>
<option value="87">Kiribati</option>
<option value="88">Korea</option>
<option value="262">Kosovo</option>
<option value="89">Kuwait</option>
<option value="90">Kyrgyzstan</option>
<option value="91">Laos</option>
<option value="92">Latvia</option>
<option value="93">Lebanon</option>
<option value="94">Lesotho</option>
<option value="95">Liberia</option>
<option value="96">Libya</option>
<option value="97">Liechtenstein</option>
<option value="98">Lithuania</option>
<option value="99">Luxembourg</option>
<option value="248">Macau</option>
<option value="100">Macedonia</option>
<option value="101">Madagascar</option>
<option value="102">Malawi</option>
<option value="103">Malaysia</option>
<option value="104">Maldives</option>
<option value="105">Mali</option>
<option value="106">Malta</option>
<option value="107">Marshall Islands</option>
<option value="253">Martinique</option>
<option value="108">Mauritania</option>
<option value="109">Mauritius</option>
<option value="206">Mayotte</option>
<option value="110">Mexico</option>
<option value="111">Micronesia</option>
<option value="242">Midway Islands</option>
<option value="112">Moldova</option>
<option value="113">Monaco</option>
<option value="114">Mongolia</option>
<option value="115">Montenegro</option>
<option value="228">Montserrat</option>
<option value="116">Morocco</option>
<option value="117">Mozambique</option>
<option value="118">Myanmar (Burma)</option>
<option value="193">Nagorno-Karabakh</option>
<option value="119">Namibia</option>
<option value="120">Nauru</option>
<option value="243">Navassa Island</option>
<option value="121">Nepal</option>
<option value="122">Netherlands</option>
<option value="257">Netherlands Antilles</option>
<option value="204">New Caledonia</option>
<option value="123">New Zealand</option>
<option value="124">Nicaragua</option>
<option value="125">Niger</option>
<option value="126">Nigeria</option>
<option value="215">Niue</option>
<option value="203">Norfolk Island</option>
<option value="194">Northern Cyprus</option>
<option value="233">Northern Mariana Islands</option>
<option value="127">Norway</option>
<option value="128">Oman</option>
<option value="129">Pakistan</option>
<option value="130">Palau</option>
<option value="263">Palestinian Territories (Gaza Strip and West Bank)</option>
<option value="244">Palmyra Atoll</option>
<option value="131">Panama</option>
<option value="132">Papua New Guinea</option>
<option value="133">Paraguay</option>
<option value="134">Peru</option>
<option value="267">Peter I Island</option>
<option value="135">Philippines</option>
<option value="229">Pitcairn Islands</option>
<option value="136">Poland</option>
<option value="137">Portugal</option>
<option value="195">Pridnestrovie (Transnistria)</option>
<option value="234">Puerto Rico</option>
<option value="138">Qatar</option>
<option value="268">Queen Maud Land</option>
<option value="254">Reunion</option>
<option value="139">Romania</option>
<option value="266">Ross Dependency</option>
<option value="140">Russia</option>
<option value="141">Rwanda</option>
<option value="207">Saint Barthelemy</option>
<option value="230">Saint Helena</option>
<option value="142">Saint Kitts and Nevis</option>
<option value="143">Saint Lucia</option>
<option value="208">Saint Martin</option>
<option value="209">Saint Pierre and Miquelon</option>
<option value="144">Saint Vincent and the Grenadines</option>
<option value="145">Samoa</option>
<option value="146">San Marino</option>
<option value="147">Sao Tome and Principe</option>
<option value="148">Saudi Arabia</option>
<option value="149">Senegal</option>
<option value="150">Serbia</option>
<option value="151">Seychelles</option>
<option value="152">Sierra Leone</option>
<option value="153">Singapore</option>
<option value="154">Slovakia</option>
<option value="155">Slovenia</option>
<option value="156">Solomon Islands</option>
<option value="157">Somalia</option>
<option value="196">Somaliland</option>
<option value="158">South Africa</option>
<option value="231">South Georgia and the South Sandwich Islands</option>
<option value="197">South Ossetia</option>
<option value="159">Spain</option>
<option value="160">Sri Lanka</option>
<option value="161">Sudan</option>
<option value="162">Suriname</option>
<option value="258">Svalbard</option>
<option value="163">Swaziland</option>
<option value="164">Sweden</option>
<option value="165">Switzerland</option>
<option value="166">Syria</option>
<option value="167">Tajikistan</option>
<option value="168">Tanzania</option>
<option value="169">Thailand</option>
<option value="170">Timor-Leste (East Timor)</option>
<option value="171">Togo</option>
<option value="216">Tokelau</option>
<option value="172">Tonga</option>
<option value="173">Trinidad and Tobago</option>
<option value="260">Tristan da Cunha</option>
<option value="174">Tunisia</option>
<option value="175">Turkey</option>
<option value="176">Turkmenistan</option>
<option value="232">Turks and Caicos Islands</option>
<option value="177">Tuvalu</option>
<option value="178">Uganda</option>
<option value="179">Ukraine</option>
<option value="180">United Arab Emirates</option>
<option value="181">United Kingdom</option>
<option value="182">United States</option>
<option value="183">Uruguay</option>
<option value="245">U.S. Virgin Islands</option>
<option value="184">Uzbekistan</option>
<option value="185">Vanuatu</option>
<option value="186">Vatican City</option>
<option value="187">Venezuela</option>
<option value="188">Vietnam</option>
<option value="246">Wake Island</option>
<option value="210">Wallis and Futuna</option>
<option value="264">Western Sahara</option>
<option value="189">Yemen</option>
<option value="190">Zambia</option>
<option value="191">Zimbabwe</option>
</select>
<label for="profile_information_form_country_id" class="mdl-selectfield__label">Country</label>
<span class="mdl-selectfield__error">Input is not a empty!</span>
</div>
</div>
</div>
<div class="mdl-color--whitemdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
<div class="mdl-cell mdl-cell--2-col">
<div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label" style="width:100px">
<select id="profile_information_form_dob_2i" name="profile_information_form[dob(2i)]" class="date required mdl-selectfield__select" required>
<option value=""></option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<label for="profile_information_form_dob_2i" class="mdl-selectfield__label">MM</label>
<span class="mdl-selectfield__error">Input is not a empty!</span>
</div>
</div>
<div class="mdl-cell mdl-cell--10-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" name="sample4" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4" required>
<label class="mdl-textfield__label" for="sample4">Number...</label>
<span class="mdl-textfield__error">Input is not a number!</span>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--12-col">
<div class="demo-card-wide mdl-card mdl-shadow--2dp" style="overflow: inherit; z-index: 1">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<div id="select_country_1" class="mdl-selectfield mdl-js-selectfield mdl-textfield--floating-label">
<select id="profile_information_form_country_id_1" name="profile_information_form_country" class="mdl-selectfield__select" required>
<option value=""></option>
<option value="192">Abkhazia</option>
<option value="1">Afghanistan</option>
<option value="255" disabled>Aland</option>
<option value="2">Albania</option>
<option value="3" disabled="disabled">Algeria</option>
<option value="235">American Samoa</option>
<option value="4">Andorra</option>
<option value="5">Angola</option>
<option value="220">Anguilla</option>
<option value="261">Antarctica</option>
<option value="6">Antigua and Barbuda</option>
<option value="7">Argentina</option>
<option value="8">Armenia</option>
<option value="256">Aruba</option>
<option value="259">Ascension</option>
<option value="198">Ashmore and Cartier Islands</option>
<option value="9">Australia</option>
<option value="265">Australian Antarctic Territory</option>
<option value="10">Austria</option>
<option value="11">Azerbaijan</option>
<option value="12">Bahamas</option>
<option value="13">Bahrain</option>
<option value="236">Baker Island</option>
<option value="14">Bangladesh</option>
<option value="15">Barbados</option>
<option value="16">Belarus</option>
<option value="17">Belgium</option>
<option value="18">Belize</option>
<option value="19">Benin</option>
<option value="221">Bermuda</option>
<option value="20">Bhutan</option>
<option value="21">Bolivia</option>
<option value="22">Bosnia and Herzegovina</option>
<option value="23">Botswana</option>
<option value="213">Bouvet Island</option>
<option value="24">Brazil</option>
<option value="269">British Antarctic Territory</option>
<option value="222">British Indian Ocean Territory</option>
<option value="223">British Sovereign Base Areas</option>
<option value="224">British Virgin Islands</option>
<option value="25">Brunei</option>
<option value="26">Bulgaria</option>
<option value="27">Burkina Faso</option>
<option value="28">Burundi</option>
<option value="29">Cambodia</option>
<option value="30">Cameroon</option>
<option value="31">Canada</option>
<option value="32">Cape Verde</option>
<option value="225">Cayman Islands</option>
<option value="33">Central African Republic</option>
<option value="34">Chad</option>
<option value="35">Chile</option>
<option value="36">China</option>
<option value="199">Christmas Island</option>
<option value="212">Clipperton Island</option>
<option value="200">Cocos (Keeling) Islands</option>
<option value="37">Colombia</option>
<option value="38">Comoros</option>
<option value="39">Congo</option>
<option value="214">Cook Islands</option>
<option value="201">Coral Sea Islands</option>
<option value="40">Costa Rica</option>
<option value="41">Cote d'Ivoire (Ivory Coast)</option>
<option value="42">Croatia</option>
<option value="43">Cuba</option>
<option value="44">Cyprus</option>
<option value="45">Czech Republic</option>
<option value="46">Denmark</option>
<option value="47">Djibouti</option>
<option value="48">Dominica</option>
<option value="49">Dominican Republic</option>
<option value="50">Ecuador</option>
<option value="51">Egypt</option>
<option value="52">El Salvador</option>
<option value="53">Equatorial Guinea</option>
<option value="54">Eritrea</option>
<option value="55">Estonia</option>
<option value="56">Ethiopia</option>
<option value="226">Falkland Islands (Islas Malvinas)</option>
<option value="249">Faroe Islands</option>
<option value="57">Fiji</option>
<option value="58">Finland</option>
<option value="59">France</option>
<option value="251">French Guiana</option>
<option value="205">French Polynesia</option>
<option value="211">French Southern and Antarctic Lands</option>
<option value="60">Gabon</option>
<option value="61">Gambia</option>
<option value="62">Georgia</option>
<option value="63">Germany</option>
<option value="64">Ghana</option>
<option value="227">Gibraltar</option>
<option value="65">Greece</option>
<option value="250">Greenland</option>
<option value="66">Grenada</option>
<option value="252">Guadeloupe</option>
<option value="237">Guam</option>
<option value="67">Guatemala</option>
<option value="217">Guernsey</option>
<option value="68">Guinea</option>
<option value="69">Guinea-Bissau</option>
<option value="70">Guyana</option>
<option value="71">Haiti</option>
<option value="202">Heard Island and McDonald Islands</option>
<option value="72">Honduras</option>
<option value="247">Hong Kong</option>
<option value="238">Howland Island</option>
<option value="73">Hungary</option>
<option value="74">Iceland</option>
<option value="75">India</option>
<option value="76">Indonesia</option>
<option value="77">Iran</option>
<option value="78">Iraq</option>
<option value="79">Ireland</option>
<option value="218">Isle of Man</option>
<option value="80">Israel</option>
<option value="81">Italy</option>
<option value="82">Jamaica</option>
<option value="83">Japan</option>
<option value="239">Jarvis Island</option>
<option value="219">Jersey</option>
<option value="240">Johnston Atoll</option>
<option value="84">Jordan</option>
<option value="85">Kazakhstan</option>
<option value="86">Kenya</option>
<option value="241">Kingman Reef</option>
<option value="87">Kiribati</option>
<option value="88">Korea</option>
<option value="262">Kosovo</option>
<option value="89">Kuwait</option>
<option value="90">Kyrgyzstan</option>
<option value="91">Laos</option>
<option value="92">Latvia</option>
<option value="93">Lebanon</option>
<option value="94">Lesotho</option>
<option value="95">Liberia</option>
<option value="96">Libya</option>
<option value="97">Liechtenstein</option>
<option value="98">Lithuania</option>
<option value="99">Luxembourg</option>
<option value="248">Macau</option>
<option value="100">Macedonia</option>
<option value="101">Madagascar</option>
<option value="102">Malawi</option>
<option value="103">Malaysia</option>
<option value="104">Maldives</option>
<option value="105">Mali</option>
<option value="106">Malta</option>
<option value="107">Marshall Islands</option>
<option value="253">Martinique</option>
<option value="108">Mauritania</option>
<option value="109">Mauritius</option>
<option value="206">Mayotte</option>
<option value="110">Mexico</option>
<option value="111">Micronesia</option>
<option value="242">Midway Islands</option>
<option value="112">Moldova</option>
<option value="113">Monaco</option>
<option value="114">Mongolia</option>
<option value="115">Montenegro</option>
<option value="228">Montserrat</option>
<option value="116">Morocco</option>
<option value="117">Mozambique</option>
<option value="118">Myanmar (Burma)</option>
<option value="193">Nagorno-Karabakh</option>
<option value="119">Namibia</option>
<option value="120">Nauru</option>
<option value="243">Navassa Island</option>
<option value="121">Nepal</option>
<option value="122">Netherlands</option>
<option value="257">Netherlands Antilles</option>
<option value="204">New Caledonia</option>
<option value="123">New Zealand</option>
<option value="124">Nicaragua</option>
<option value="125">Niger</option>
<option value="126">Nigeria</option>
<option value="215">Niue</option>
<option value="203">Norfolk Island</option>
<option value="194">Northern Cyprus</option>
<option value="233">Northern Mariana Islands</option>
<option value="127">Norway</option>
<option value="128">Oman</option>
<option value="129">Pakistan</option>
<option value="130">Palau</option>
<option value="263">Palestinian Territories (Gaza Strip and West Bank)</option>
<option value="244">Palmyra Atoll</option>
<option value="131">Panama</option>
<option value="132">Papua New Guinea</option>
<option value="133">Paraguay</option>
<option value="134">Peru</option>
<option value="267">Peter I Island</option>
<option value="135">Philippines</option>
<option value="229">Pitcairn Islands</option>
<option value="136">Poland</option>
<option value="137">Portugal</option>
<option value="195">Pridnestrovie (Transnistria)</option>
<option value="234">Puerto Rico</option>
<option value="138">Qatar</option>
<option value="268">Queen Maud Land</option>
<option value="254">Reunion</option>
<option value="139">Romania</option>
<option value="266">Ross Dependency</option>
<option value="140">Russia</option>
<option value="141">Rwanda</option>
<option value="207">Saint Barthelemy</option>
<option value="230">Saint Helena</option>
<option value="142">Saint Kitts and Nevis</option>
<option value="143">Saint Lucia</option>
<option value="208">Saint Martin</option>
<option value="209">Saint Pierre and Miquelon</option>
<option value="144">Saint Vincent and the Grenadines</option>
<option value="145">Samoa</option>
<option value="146">San Marino</option>
<option value="147">Sao Tome and Principe</option>
<option value="148">Saudi Arabia</option>
<option value="149">Senegal</option>
<option value="150">Serbia</option>
<option value="151">Seychelles</option>
<option value="152">Sierra Leone</option>
<option value="153">Singapore</option>
<option value="154">Slovakia</option>
<option value="155">Slovenia</option>
<option value="156">Solomon Islands</option>
<option value="157">Somalia</option>
<option value="196">Somaliland</option>
<option value="158">South Africa</option>
<option value="231">South Georgia and the South Sandwich Islands</option>
<option value="197">South Ossetia</option>
<option value="159">Spain</option>
<option value="160">Sri Lanka</option>
<option value="161">Sudan</option>
<option value="162">Suriname</option>
<option value="258">Svalbard</option>
<option value="163">Swaziland</option>
<option value="164">Sweden</option>
<option value="165">Switzerland</option>
<option value="166">Syria</option>
<option value="167">Tajikistan</option>
<option value="168">Tanzania</option>
<option value="169">Thailand</option>
<option value="170">Timor-Leste (East Timor)</option>
<option value="171">Togo</option>
<option value="216">Tokelau</option>
<option value="172">Tonga</option>
<option value="173">Trinidad and Tobago</option>
<option value="260">Tristan da Cunha</option>
<option value="174">Tunisia</option>
<option value="175">Turkey</option>
<option value="176">Turkmenistan</option>
<option value="232">Turks and Caicos Islands</option>
<option value="177">Tuvalu</option>
<option value="178">Uganda</option>
<option value="179">Ukraine</option>
<option value="180">United Arab Emirates</option>
<option value="181">United Kingdom</option>
<option value="182">United States</option>
<option value="183">Uruguay</option>
<option value="245">U.S. Virgin Islands</option>
<option value="184">Uzbekistan</option>
<option value="185">Vanuatu</option>
<option value="186">Vatican City</option>
<option value="187">Venezuela</option>
<option value="188">Vietnam</option>
<option value="246">Wake Island</option>
<option value="210">Wallis and Futuna</option>
<option value="264">Western Sahara</option>
<option value="189">Yemen</option>
<option value="190">Zambia</option>
<option value="191">Zimbabwe</option>
</select>
<label for="profile_information_form_country_id_1" class="mdl-selectfield__label">Country</label>
<span class="mdl-selectfield__error">Input is not a empty!</span>
</div>
</div>
</div>
</div>
<div class="mdl-color--whitemdl-shadow--2dp mdl-cell mdl-cell--12-col