I am trying to use javascript to automatically fill a form and I am having some difficult setting the value for the country.
<form action="/payment" method="post" novalidate="">
<div class="input_group">
<p class="input text changed">
<label for="shipping_address_1">Address</label>
<input type="text" name="shipping_address_1" id="shipping_address_1" value="xxx">
</p>
</div>
<div class="input_group" data-ignore-validation="true">
<p class="input text">
<label for="shipping_address_2">Apt num, Suite (optional)</label>
<input type="text" name="shipping_address_2" value="">
</p>
</div>
<div class="input_group">
<p class="input text span_half changed">
<label for="shipping_city">City</label>
<input type="text" name="shipping_city" value="xxx">
</p>
<p class="text input select span_half changed">
<label for="shipping_state" data-loading="Loading" data-default="State / Province">State / Province</label>
<span class="select_wrapper"><select name="shipping_state">
<option value="">State / Province</option>
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Ontario" selected="">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Yukon Territory">Yukon Territory</option>
</select><span class="value">Ontario</span></span>
</p>
</div>
<div class="input_group">
<p class="input text span_half changed">
<label for="shipping_zip">Zip / Postal code</label>
<input type="text" name="shipping_zip" value="xxxxx" maxlength="10">
</p>
<p class="text input select span_half changed">
<label>Country</label>
<span class="select_wrapper"><select name="shipping_country_id">
<option value="46">Afghanistan</option>
<option value="47">Albania</option>
<option value="48">Algeria</option>
<option value="49">American Samoa</option>
<option value="50">Andorra</option>
<option value="51">Angola</option>
<option value="1">Anguilla</option>
<option value="52">Antarctica</option>
<option value="53">Antigua And Barbuda</option>
<option value="2">Argentina</option>
<option value="54">Armenia</option>
<option value="55">Aruba</option>
<option value="3">Australia</option>
<option value="4">Austria</option>
<option value="56">Azerbaijan</option>
<option value="253">Åland Islands</option>
<option value="57">Bahamas</option>
<option value="58">Bahrain</option>
<option value="59">Bangladesh</option>
<option value="60">Barbados</option>
<option value="61">Belarus</option>
<option value="5">Belgium</option>
<option value="62">Belize</option>
<option value="63">Benin</option>
<option value="64">Bermuda</option>
<option value="65">Bhutan</option>
<option value="66">Bolivia</option>
<option value="67">Bosnia and Herzegovina</option>
<option value="68">Botswana</option>
<option value="69">Bouvet Island</option>
<option value="6">Brazil</option>
<option value="70">British Indian Ocean Territory</option>
<option value="71">British Virgin Islands</option>
<option value="72">Brunei Darussalam</option>
<option value="73">Bulgaria</option>
<option value="74">Burkina Faso</option>
<option value="75">Burundi</option>
<option value="76">Cambodia</option>
<option value="77">Cameroon</option>
<option value="7" selected="">Canada</option>
<option value="78">Cape Verde</option>
<option value="79">Cayman Islands</option>
<option value="80">Central African Republic</option>
<option value="81">Chad</option>
<option value="8">Chile</option>
<option value="9">China</option>
<option value="82">Christmas Island</option>
<option value="83">Cocos (Keeling) Islands</option>
<option value="84">Colombia</option>
<option value="85">Comoros</option>
<option value="86">Congo</option>
<option value="87">Cook Islands</option>
<option value="10">Costa Rica</option>
<option value="88">Cote D'Ivoire (Ivory Coast)</option>
<option value="89">Croatia (Hrvatska)</option>
<option value="90">Cuba</option>
<option value="91">Cyprus</option>
<option value="92">Czech Republic</option>
<option value="249">Democratic Republic of the Congo</option>
<option value="11">Denmark</option>
<option value="93">Djibouti</option>
<option value="94">Dominica</option>
<option value="12">Dominican Republic</option>
<option value="95">East Timor</option>
<option value="13">Ecuador</option>
<option value="96">Egypt</option>
<option value="97">El Salvador</option>
<option value="98">Equatorial Guinea</option>
<option value="99">Eritrea</option>
<option value="100">Estonia</option>
<option value="101">Ethiopia</option>
<option value="102">Falkland Islands</option>
<option value="103">Faroe Islands</option>
<option value="104">Fiji</option>
<option value="14">Finland</option>
<option value="15">France</option>
<option value="105">France, Metropolitan</option>
<option value="106">French Guiana</option>
<option value="107">French Polynesia</option>
<option value="108">French Southern Territories</option>
<option value="109">Gabon</option>
<option value="110">Gambia</option>
<option value="111">Georgia</option>
<option value="16">Germany</option>
<option value="112">Ghana</option>
<option value="113">Gibraltar</option>
<option value="17">Greece</option>
<option value="114">Greenland</option>
<option value="115">Grenada</option>
<option value="116">Guadeloupe</option>
<option value="117">Guam</option>
<option value="118">Guatemala</option>
<option value="244">Guernsey</option>
<option value="119">Guinea</option>
<option value="120">Guinea-Bissau</option>
<option value="121">Guyana</option>
<option value="122">Haiti</option>
<option value="123">Heard and McDonald Islands</option>
<option value="124">Honduras</option>
<option value="18">Hong Kong</option>
<option value="125">Hungary</option>
<option value="19">Iceland</option>
<option value="20">India</option>
<option value="126">Indonesia</option>
<option value="127">Iran</option>
<option value="128">Iraq</option>
<option value="21">Ireland</option>
<option value="245">Isle of Man</option>
<option value="22">Israel</option>
<option value="23">Italy</option>
<option value="24">Jamaica</option>
<option value="25">Japan</option>
<option value="247">Jersey</option>
<option value="129">Jordan</option>
<option value="130">Kazakhstan</option>
<option value="131">Kenya</option>
<option value="132">Kiribati</option>
<option value="133">Korea (North) (People's Republic)</option>
<option value="134">Kuwait</option>
<option value="135">Kyrgyzstan (Kyrgyz Republic)</option>
<option value="136">Laos</option>
<option value="137">Latvia</option>
<option value="138">Lebanon</option>
<option value="139">Lesotho</option>
<option value="140">Liberia</option>
<option value="141">Libya</option>
<option value="142">Liechtenstein</option>
<option value="143">Lithuania</option>
<option value="26">Luxembourg</option>
<option value="144">Macau</option>
<option value="145">Macedonia</option>
<option value="146">Madagascar</option>
<option value="147">Malawi</option>
<option value="27">Malaysia</option>
<option value="148">Maldives</option>
<option value="149">Mali</option>
<option value="150">Malta</option>
<option value="151">Marshall Islands</option>
<option value="152">Martinique</option>
<option value="153">Mauritania</option>
<option value="154">Mauritius</option>
<option value="155">Mayotte</option>
<option value="28">Mexico</option>
<option value="156">Micronesia</option>
<option value="157">Moldova</option>
<option value="29">Monaco</option>
<option value="158">Mongolia</option>
<option value="243">Montenegro</option>
<option value="159">Montserrat</option>
<option value="160">Morocco</option>
<option value="161">Mozambique</option>
<option value="162">Myanmar</option>
<option value="163">Namibia</option>
<option value="164">Nauru</option>
<option value="165">Nepal</option>
<option value="30">Netherlands</option>
<option value="166">Netherlands Antilles</option>
<option value="167">Neutral Zone (Saudia Arabia/Iraq)</option>
<option value="168">New Caledonia</option>
<option value="31">New Zealand</option>
<option value="169">Nicaragua</option>
<option value="170">Niger</option>
<option value="171">Nigeria</option>
<option value="172">Niue</option>
<option value="173">Norfolk Island</option>
<option value="174">Northern Mariana Islands</option>
<option value="32">Norway</option>
<option value="175">Oman</option>
<option value="176">Pakistan</option>
<option value="177">Palau</option>
<option value="186">Palestine</option>
<option value="178">Panama</option>
<option value="179">Papua New Guinea</option>
<option value="180">Paraguay</option>
<option value="181">Peru</option>
<option value="182">Philippines</option>
<option value="183">Pitcairn</option>
<option value="184">Poland</option>
<option value="33">Portugal</option>
<option value="185">Puerto Rico</option>
<option value="187">Qatar</option>
<option value="188">Reunion</option>
<option value="189">Romania</option>
<option value="190">Russian Federation</option>
<option value="191">Rwanda</option>
<option value="192">S. Georgia and S. Sandwich Isls.</option>
<option value="193">Saint Kitts and Nevis</option>
<option value="194">Saint Lucia</option>
<option value="195">Saint Vincent and The Grenadines</option>
<option value="196">Samoa</option>
<option value="197">San Marino</option>
<option value="198">Sao Tome and Principe</option>
<option value="199">Saudi Arabia</option>
<option value="200">Senegal</option>
<option value="242">Serbia</option>
<option value="201">Seychelles</option>
<option value="202">Sierra Leone</option>
<option value="34">Singapore</option>
<option value="203">Slovakia (Slovak Republic)</option>
<option value="204">Slovenia</option>
<option value="205">Solomon Islands</option>
<option value="206">Somalia</option>
<option value="207">South Africa</option>
<option value="35">South Korea</option>
<option value="208">Soviet Union (former)</option>
<option value="36">Spain</option>
<option value="209">Sri Lanka</option>
<option value="210">St. Helena</option>
<option value="211">St. Pierre and Miquelon</option>
<option value="212">Sudan</option>
<option value="213">Suriname</option>
<option value="214">Svalbard and Jan Mayen Islands</option>
<option value="215">Swaziland</option>
<option value="37">Sweden</option>
<option value="38">Switzerland</option>
<option value="216">Syria</option>
<option value="39">Taiwan</option>
<option value="217">Tajikistan</option>
<option value="218">Tanzania</option>
<option value="40">Thailand</option>
<option value="251">Timore-Leste</option>
<option value="219">Togo</option>
<option value="220">Tokelau</option>
<option value="221">Tonga</option>
<option value="222">Trinidad and Tobago</option>
<option value="223">Tunisia</option>
<option value="41">Turkey</option>
<option value="224">Turkmenistan</option>
<option value="225">Turks and Caicos Islands</option>
<option value="226">Tuvalu</option>
<option value="227">Uganda</option>
<option value="228">Ukraine</option>
<option value="229">United Arab Emirates</option>
<option value="42">United Kingdom</option>
<option value="43">United States</option>
<option value="257">United States Minor Outlying Islands</option>
<option value="44">Uruguay</option>
<option value="230">Uzbekistan</option>
<option value="231">Vanuatu</option>
<option value="232">Vatican City State (Holy See)</option>
<option value="45">Venezuela</option>
<option value="233">Viet Nam</option>
<option value="234">Virgin Islands (US)</option>
<option value="235">Wallis and Futuna Islands</option>
<option value="236">Western Sahara</option>
<option value="237">Yemen</option>
<option value="255">Yugoslavia</option>
<option value="239">Zaire</option>
<option value="240">Zambia</option>
<option value="241">Zimbabwe</option>
</select><span class="value">Canada</span></span>
</p>
</div>
<div class="submit">
<span class="button" data-update="Update" data-default="Next" style="padding: 0px; width: 138px;">
<span class="text" unselectable="on">Update</span>
<button type="submit">Update</button>
<span class="loader icon">d</span>
<span class="success icon">e</span>
</span>
</div>
</form>
Any suggestions on how to set the value for shipping_country_id?
This should be very simple and I'm surprised at how much difficulty I am experiencing.
Not sure if I understand your question correctly, but this should populate it:
document.getElementsByName('shipping_country_id')[0].value = '47'
This sets the default value of the select element to 'Albania'
To set the address:
document.getElementById('shipping_address_1').value = 'New Address';
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I'm trying to add Covid-19 cases to my site via javascript/api but there is something wrong. Querying by country works fine, but querying for "total" returns nothing.
So I want to get in total "infected" from all over the world and in the second row from one country.
If anyone has any idea what needs to change in the code please let me know.
$(document).on('change','.corona-select', function() {
var city = $(this).val();
if (city == 'Kosovo') {
$('#c_confirmed').html();
$('#c_recovered').html();
$('#c_deaths').html();
}
else if(city == 'total') {
$('#c_confirmed').html();
$('#c_recovered').html();
$('#c_deaths').html();
}
else {
$.get( "https://covid19.mathdro.id/api/countries/" + city, function( data ) {
$('#c_confirmed').html(data.confirmed.value);
$('#c_recovered').html(data.recovered.value);
$('#c_deaths').html(data.deaths.value);
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="selectBox">
<select class="form-control corona-select" name="city">
<option value="total">Total</option>
<option value="Kosova">Kosova</option>
<option value="Albania">Albania</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Algeria">Algeria</option>
<option value="Andorra">Andorra</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Brazil">Brazil</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Colombia">Colombia</option>
<option value="Congo (Kinshasa)">Congo (Kinshasa)</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote d'Ivoire">Cote d'Ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cruise Ship">Cruise Ship</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czechia">Czechia</option>
<option value="Denmark">Denmark</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="Estonia">Estonia</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="French Guiana">French Guiana</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Greece">Greece</option>
<option value="Guyana">Guyana</option>
<option value="Holy See">Holy See</option>
<option value="Honduras">Honduras</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="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Korea, South">Korea, South</option>
<option value="Kuwait">Kuwait</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Malta">Malta</option>
<option value="Martinique">Martinique</option>
<option value="Mexico">Mexico</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="me">Montenegro</option>
<option value="Morocco">Morocco</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="New Zealand">New Zealand</option>
<option value="Nigeria">Nigeria</option>
<option value="North Macedonia">North Macedonia</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Panama">Panama</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Qatar">Qatar</option>
<option value="Reunion">Reunion</option>
<option value="Romania">Romania</option>
<option value="Russia">Russia</option>
<option value="San Marino">San Marino</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia">Serbia</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="South Africa">South Africa</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Taiwan*">Taiwan*</option>
<option value="Thailand">Thailand</option>
<option value="Togo">Togo</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="US">US</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Vietnam">Vietnam</option>
</select>
</div>
</div>
<div class="col-lg-3 col-md-3 col-12">
<div class="mapi-info">
<p class="title-mapi">Confirmed</p>
<span class="nr-mapi" id="c_confirmed"></span>
</div>
<div class="mapi red"></div>
</div>
<div class="col-lg-3 col-md-3 col-12">
<div class="mapi-info">
<p class="title-mapi">Recovered</p>
<span class="nr-mapi" id="c_recovered"></span>
</div>
<div class="mapi green"></div>
</div>
<div class="col-lg-3 col-md-3 col-12">
<div class="mapi-info">
<p class="title-mapi">Deaths</p>
<span class="nr-mapi" id="c_deaths"></span>
</div>
<div class="mapi gray"></div>
</div>
Looking at the API, you have a typo in your <select> options: Kosova won't work, but Kosovo will:
https://covid19.mathdro.id/api/countries/Kosova
https://covid19.mathdro.id/api/countries/Kosovo
Secondly, you'll need to query a different endpoint to get your total data.
total data: https://covid19.mathdro.id/api/
country data: https://covid19.mathdro.id/api/countries/${country}
Lastly, if you want to show the total values immediately without having to select a country and then select "total" again, you'll need to be able to abstract some logic out of the .on() handler.
Here's a rewrite of your logic that removes some duplication, queries "total" immediately, and corrects "city" to "country".
// this function doesn't need to know about the <select> element
// all it needs is a string value
function showValuesForCountry(country) {
var endpoint = 'https://covid19.mathdro.id/api/';
// swap in the country-specific URL if we're not trying to get total data
if (country != 'total') {
endpoint = `https://covid19.mathdro.id/api/countries/${country}`;
}
// no need to duplicate the API call or value-setting code
// since we're using the dynamic endpoint value determined above
$.get(endpoint, function(data) {
$('#c_confirmed').html(data.confirmed.value);
$('#c_recovered').html(data.recovered.value);
$('#c_deaths').html(data.deaths.value);
});
}
// when the select changes, get new data
$(document).on('change','.corona-select', function() {
// get a string value from the <select>
var country = $(this).val();
// pass that string value to our reusable function
showValuesForCountry(country);
});
// call this function when the page loads
// since 'total' is our default value, get that data immediately
showValuesForCountry('total');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="selectBox">
<select class="form-control corona-select" name="city">
<option value="total">Total</option>
<option value="Kosovo">Kosovo</option>
<option value="Albania">Albania</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Algeria">Algeria</option>
<option value="Andorra">Andorra</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Brazil">Brazil</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Colombia">Colombia</option>
<option value="Congo (Kinshasa)">Congo (Kinshasa)</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote d'Ivoire">Cote d'Ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cruise Ship">Cruise Ship</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czechia">Czechia</option>
<option value="Denmark">Denmark</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="Estonia">Estonia</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="French Guiana">French Guiana</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Greece">Greece</option>
<option value="Guyana">Guyana</option>
<option value="Holy See">Holy See</option>
<option value="Honduras">Honduras</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="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Korea, South">Korea, South</option>
<option value="Kuwait">Kuwait</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Malta">Malta</option>
<option value="Martinique">Martinique</option>
<option value="Mexico">Mexico</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="me">Montenegro</option>
<option value="Morocco">Morocco</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="New Zealand">New Zealand</option>
<option value="Nigeria">Nigeria</option>
<option value="North Macedonia">North Macedonia</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Panama">Panama</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Qatar">Qatar</option>
<option value="Reunion">Reunion</option>
<option value="Romania">Romania</option>
<option value="Russia">Russia</option>
<option value="San Marino">San Marino</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia">Serbia</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="South Africa">South Africa</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Taiwan*">Taiwan*</option>
<option value="Thailand">Thailand</option>
<option value="Togo">Togo</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="US">US</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Vietnam">Vietnam</option>
</select>
</div>
</div>
<div class="col-lg-3 col-md-3 col-12">
<div class="mapi-info">
<p class="title-mapi">Confirmed</p>
<span class="nr-mapi" id="c_confirmed"></span>
</div>
<div class="mapi red"></div>
</div>
<div class="col-lg-3 col-md-3 col-12">
<div class="mapi-info">
<p class="title-mapi">Recovered</p>
<span class="nr-mapi" id="c_recovered"></span>
</div>
<div class="mapi green"></div>
</div>
<div class="col-lg-3 col-md-3 col-12">
<div class="mapi-info">
<p class="title-mapi">Deaths</p>
<span class="nr-mapi" id="c_deaths"></span>
</div>
<div class="mapi gray"></div>
</div>
you can fix this by adding the jquery script in the head of your html file like the following example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="selectBox">
<select class="form-control corona-select" name="city">
<option value="total">Total</option>
<option value="Kosova">Kosova</option>
<option value="Albania">Albania</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Algeria">Algeria</option>
<option value="Andorra">Andorra</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Brazil">Brazil</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Colombia">Colombia</option>
<option value="Congo (Kinshasa)">Congo (Kinshasa)</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote d'Ivoire">Cote d'Ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cruise Ship">Cruise Ship</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czechia">Czechia</option>
<option value="Denmark">Denmark</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="Estonia">Estonia</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="French Guiana">French Guiana</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Greece">Greece</option>
<option value="Guyana">Guyana</option>
<option value="Holy See">Holy See</option>
<option value="Honduras">Honduras</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="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Korea, South">Korea, South</option>
<option value="Kuwait">Kuwait</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Malta">Malta</option>
<option value="Martinique">Martinique</option>
<option value="Mexico">Mexico</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="me">Montenegro</option>
<option value="Morocco">Morocco</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="New Zealand">New Zealand</option>
<option value="Nigeria">Nigeria</option>
<option value="North Macedonia">North Macedonia</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Panama">Panama</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Qatar">Qatar</option>
<option value="Reunion">Reunion</option>
<option value="Romania">Romania</option>
<option value="Russia">Russia</option>
<option value="San Marino">San Marino</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia">Serbia</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="South Africa">South Africa</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Taiwan*">Taiwan*</option>
<option value="Thailand">Thailand</option>
<option value="Togo">Togo</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="US">US</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Vietnam">Vietnam</option>
</select>
</div>
</div>
<div class="col-lg-3 col-md-3 col-12">
<div class="mapi-info">
<p class="title-mapi">Confirmed</p>
<span class="nr-mapi" id="c_confirmed"></span>
</div>
<div class="mapi red"></div>
</div>
<div class="col-lg-3 col-md-3 col-12">
<div class="mapi-info">
<p class="title-mapi">Recovered</p>
<span class="nr-mapi" id="c_recovered"></span>
</div>
<div class="mapi green"></div>
</div>
<div class="col-lg-3 col-md-3 col-12">
<div class="mapi-info">
<p class="title-mapi">Deaths</p>
<span class="nr-mapi" id="c_deaths"></span>
</div>
<div class="mapi gray"></div>
</div>
</body>
</html>
<script>
$(document).on('change','.corona-select', function(){
var city = $(this).val();
if(city == 'Kosovo'){
$('#c_confirmed').html();
$('#c_recovered').html();
$('#c_deaths').html();
}
else if(city == 'total'){
$('#c_confirmed').html();
$('#c_recovered').html();
$('#c_deaths').html();
}
else{
$.get( "https://covid19.mathdro.id/api/countries/" + city, function( data ) {
$('#c_confirmed').html(data.confirmed.value);
$('#c_recovered').html(data.recovered.value);
$('#c_deaths').html(data.deaths.value);
});
}
});</script>
function getCityConfirmed(city){
$.get( "https://covid19.mathdro.id/api/countries/" + city, function( data ) {
$('#c_confirmed').html(data.confirmed.value);
})
}
$(document).on('change','.corona-select', function() {
var city = $(this).val();
console.log(city);
if (city == 'Kosovo') {
console.log('yes');
$('#c_confirmed').html(getCityConfirmed("Kosovo"));
$('#c_recovered').html();
$('#c_deaths').html();
}
else if(city == 'total') {
$('#c_confirmed').html();
$('#c_recovered').html();
$('#c_deaths').html();
}
else {
$.get( "https://covid19.mathdro.id/api/countries/" + city, function( data ) {
$('#c_confirmed').html(data.confirmed.value);
$('#c_recovered').html(data.recovered.value);
$('#c_deaths').html(data.deaths.value);
});
}
});
I'm doing a small project for work, and I created a small HTML text file. Looking to parse the given date of birth from dropdown menus into an age that I can then run through a control flow.
I've created the dropdown lists to select the date of birth using the <select> tag, then option values. Afterwards added a submit button using the <input type="submit">
I'm trying to do this without using any external libraries or frameworks.
How can I get the person's age in only years?
it's not exactly and i suggest you to use a library but here is a proximation:
function calcAge() {
let day = document.getElementById('day').value;
let month = document.getElementById('month').value;
let year = document.getElementById('year').value;
let birthday = new Date(year, month, day);
document.getElementById('result').innerHTML = ~~(((Date.now() - birthday) / (31557600000)));
}
<label id="date_of_birth">Date of Birth:<br />
<select class="first" name="date_of_birth:day" tabindex="7" id="day">
<option value="">
<!-- -->
</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="date_of_birth:mon" tabindex="8" id="month">
<option value="">
<!-- -->
</option>
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="date_of_birth:year" tabindex="9" id="year">
<option value="">
<!-- -->
</option>
<option value="1920">1920</option>
<option value="1921">1921</option>
<option value="1922">1922</option>
<option value="1923">1923</option>
<option value="1924">1924</option>
<option value="1925">1925</option>
<option value="1926">1926</option>
<option value="1927">1927</option>
<option value="1928">1928</option>
<option value="1929">1929</option>
<option value="1930">1930</option>
<option value="1931">1931</option>
<option value="1932">1932</option>
<option value="1933">1933</option>
<option value="1934">1934</option>
<option value="1935">1935</option>
<option value="1936">1936</option>
<option value="1937">1937</option>
<option value="1938">1938</option>
<option value="1939">1939</option>
<option value="1940">1940</option>
<option value="1941">1941</option>
<option value="1942">1942</option>
<option value="1943">1943</option>
<option value="1944">1944</option>
<option value="1945">1945</option>
<option value="1946">1946</option>
<option value="1947">1947</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select>
</label>
<button onclick="calcAge()">
calculate
</button>
<br>
<div id="result" text="asdaaa">
</div>
Unfortunately the limited height <select> dropdown crashing when clicked in dropdown in Internet Explorer 11 (IE11) which use onmousedown, onchange and onblur
<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}" onchange="this.size=0;" onblur="this.size=0;">
Demo: https://codepen.io/anon/pen/LBveJp
<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}" onchange="this.size=0;" onblur="this.size=0;">
<option value="">0001</option>
<option value="">0002</option>
<option value="">0003</option>
<option value="">0004</option>
<option value="">0005</option>
<option value="">0006</option>
<option value="">0007</option>
<option value="">0008</option>
<option value="">0009</option>
<option value="">0010</option>
<option value="">0011</option>
<option value="">0012</option>
<option value="">0013</option>
<option value="">0014</option>
<option value="">0015</option>
<option value="">0016</option>
<option value="">0017</option>
<option value="">0018</option>
<option value="">0019</option>
<option value="">0020</option>
<option value="">0021</option>
<option value="">0022</option>
<option value="">0023</option>
<option value="">0024</option>
<option value="">0025</option>
<option value="">0026</option>
<option value="">0027</option>
<option value="">0028</option>
<option value="">0029</option>
<option value="">0030</option>
<option value="">0031</option>
<option value="">0032</option>
<option value="">0033</option>
<option value="">0034</option>
<option value="">0035</option>
<option value="">0036</option>
<option value="">0037</option>
<option value="">0038</option>
<option value="">0039</option>
<option value="">0040</option>
<option value="">0041</option>
<option value="">0042</option>
<option value="">0043</option>
<option value="">0044</option>
<option value="">0045</option>
<option value="">0046</option>
<option value="">0047</option>
<option value="">0048</option>
<option value="">0049</option>
<option value="">0050</option>
<option value="">0051</option>
<option value="">0052</option>
<option value="">0053</option>
<option value="">0054</option>
<option value="">0055</option>
<option value="">0056</option>
<option value="">0057</option>
<option value="">0058</option>
<option value="">0059</option>
<option value="">0060</option>
<option value="">0061</option>
<option value="">0062</option>
<option value="">0063</option>
<option value="">0064</option>
<option value="">0065</option>
<option value="">0066</option>
<option value="">0067</option>
<option value="">0068</option>
<option value="">0069</option>
<option value="">0070</option>
<option value="">0071</option>
<option value="">0072</option>
<option value="">0073</option>
<option value="">0074</option>
<option value="">0075</option>
<option value="">0076</option>
<option value="">0077</option>
<option value="">0078</option>
<option value="">0079</option>
<option value="">0080</option>
<option value="">0081</option>
<option value="">0082</option>
<option value="">0083</option>
<option value="">0084</option>
<option value="">0085</option>
<option value="">0086</option>
<option value="">0087</option>
<option value="">0088</option>
<option value="">0089</option>
<option value="">0090</option>
<option value="">0091</option>
<option value="">0092</option>
<option value="">0093</option>
<option value="">0094</option>
<option value="">0095</option>
<option value="">0096</option>
<option value="">0097</option>
<option value="">0098</option>
<option value="">0099</option>
<option value="">0100</option>
<option value="">0101</option>
<option value="">0102</option>
<option value="">0103</option>
<option value="">0104</option>
<option value="">0105</option>
<option value="">0106</option>
<option value="">0107</option>
<option value="">0108</option>
<option value="">0109</option>
<option value="">0110</option>
<option value="">0111</option>
<option value="">0112</option>
<option value="">0113</option>
<option value="">0114</option>
<option value="">0115</option>
<option value="">0116</option>
<option value="">0117</option>
<option value="">0118</option>
<option value="">0119</option>
<option value="">0120</option>
<option value="">0121</option>
<option value="">0122</option>
<option value="">0123</option>
<option value="">0124</option>
<option value="">0125</option>
<option value="">0126</option>
<option value="">0127</option>
<option value="">0128</option>
<option value="">0129</option>
<option value="">0130</option>
<option value="">0131</option>
<option value="">0132</option>
<option value="">0133</option>
<option value="">0134</option>
<option value="">0135</option>
<option value="">0136</option>
<option value="">0137</option>
<option value="">0138</option>
<option value="">0139</option>
<option value="">0140</option>
<option value="">0141</option>
<option value="">0142</option>
<option value="">0143</option>
<option value="">0144</option>
<option value="">0145</option>
<option value="">0146</option>
<option value="">0147</option>
<option value="">0148</option>
<option value="">0149</option>
<option value="">0150</option>
</select>
Make your listeners passive.
I'm not so sure but try to attach those listeners using Javascript, instead of doing it directly in HTML and then make those listeners passive. That might fix your issue. Read more about passive event listening here.
Using jQuery, I'm trying to change the selected option in a SELECT element dynamically. It's working fine on Chrome/IE on windows but not working on iPad/Safari.
Here is my code:
$("#ddlRegion").find('option').attr("selected",false).prop('selected', false);
$("#cicddlRegion option[value='" + currCode + "']").attr('selected', 'selected').prop('selected',true);
HTML After rendered:
<select id="ddlRegion" aria-invalid="false">
<option value="0"> </option>
<option value="ABR">Abruzzo</option>
<option value="AG">Agrigento</option>
<option value="AL">Alessandria</option>
<option value="AN">Ancona</option>
<option value="AO">Aosta</option>
<option value="AR">Arezzo</option>
<option value="AP">Ascoli Piceno</option>
<option value="AT">Asti</option>
<option value="AV">Avellino</option>
<option value="BA">Bari</option>
<option value="BT">Barletta-Andria-Trani</option>
<option value="BAS">Basilicata</option>
<option value="BL">Belluno</option>
<option value="BN">Benevento</option>
<option value="BG">Bergamo</option>
<option value="BI">Biella</option>
<option value="BO">Bologna</option>
<option value="BZ">Bolzano</option>
<option value="BS">Brescia</option>
<option value="BR">Brindisi</option>
<option value="CA">Cagliari</option>
<option value="CAL">Calabria</option>
<option value="CL">Caltanissetta</option>
<option value="CAM">Campania</option>
<option value="CB">Campobasso</option>
<option value="CI">Carbonia-Iglesias</option>
<option value="CE">Caserta</option>
<option value="CT">Catania</option>
<option value="CZ">Catanzaro</option>
<option value="CH">Chieti</option>
<option value="CO">Como</option>
<option value="CS">Cosenza</option>
<option value="CR">Cremona</option>
<option value="KR">Crotone</option>
<option value="CN">Cuneo</option>
<option value="EMI">Emilia-Romagna</option>
<option value="EN">Enna</option>
<option value="FM">Fermo</option>
<option value="FE">Ferrara</option>
<option value="FI">Firenze</option>
<option value="FG">Foggia</option>
<option value="FO">Forli</option>
<option value="FC">Forlì-Cesena</option>
<option value="FRI">Friuli-Venezia Giulia</option>
<option value="FR">Frosinone</option>
<option value="GE">Genova</option>
<option value="GO">Gorizia</option>
<option value="GR">Grosseto</option>
<option value="IM">Imperia</option>
<option value="IS">Isernia</option>
<option value="SP">La Spezia</option>
<option value="AQ">L'Aquila</option>
<option value="LT">Latina</option>
<option value="LAZ">Lazio</option>
<option value="LE">Lecce</option>
<option value="LC">Lecco</option>
<option value="LIG">Liguria</option>
<option value="LI">Livorno</option>
<option value="LO">Lodi</option>
<option value="LOM">Lombardia</option>
<option value="LU">Lucca</option>
<option value="MC">Macerata</option>
<option value="MN">Mantova</option>
<option value="MAR">Marche</option>
<option value="MS">Massa</option>
<option value="MT">Matera</option>
<option value="VS">Medio Campidano</option>
<option value="ME">Messina</option>
<option value="MI">Milano</option>
<option value="MO">Modena</option>
<option value="MOL">Molise</option>
<option value="MB">Monza e della Brianza</option>
<option value="NA">Napoli</option>
<option value="NO">Novara</option>
<option value="NU">Nuoro</option>
<option value="OG">Ogliastra</option>
<option value="OT">Olbia-Tempio</option>
<option value="OR">Oristano</option>
<option value="PD">Padova</option>
<option value="PA">Palermo</option>
<option value="PR">Parma</option>
<option value="PV">Pavia</option>
<option value="PG">Perugia</option>
<option value="PS">Pesaro</option>
<option value="PU">Pesaro and Urbino</option>
<option value="PE">Pescara</option>
<option value="PC">Piacenza</option>
<option value="PIE">Piemonte</option>
<option value="PI">Pisa</option>
<option value="PT">Pistoia</option>
<option value="PN">Pordenone</option>
<option value="PZ">Potenza</option>
<option value="PO">Prato</option>
<option value="PUG">Puglia</option>
<option value="RG">Ragusa</option>
<option value="RA">Ravenna</option>
<option value="RC">Reggio Calabria</option>
<option value="RE">Reggio Emilia</option>
<option value="RI">Rieti</option>
<option value="RN">Rimini</option>
<option value="RM" selected="selected">Roma</option>
<option value="RO">Rovigo</option>
<option value="Sm">S.m. Del Soccorso</option>
<option value="SA">Salerno</option>
<option value="SAR">Sardegna</option>
<option value="SS">Sassari</option>
<option value="SV">Savona</option>
<option value="SIC">Sicilia</option>
<option value="SI">Siena</option>
<option value="SR">Siracusa</option>
<option value="SO">Sondrio</option>
<option value="TA">Taranto</option>
<option value="TE">Teramo</option>
<option value="TR">Terni</option>
<option value="TO">Torino</option>
<option value="TOS">Toscana</option>
<option value="TP">Trapani</option>
<option value="TRE">Trentino-Alto Adige</option>
<option value="TN">Trento</option>
<option value="TV">Treviso</option>
<option value="TS">Trieste</option>
<option value="UD">Udine</option>
<option value="UMB">Umbria</option>
<option value="VAL">Valle D'Aosta</option>
<option value="VA">Varese</option>
<option value="VEN">Veneto</option>
<option value="VE">Venezia</option>
<option value="VB">Verbania</option>
<option value="VC">Vercelli</option>
<option value="VR">Verona</option>
<option value="VV">Vibo Valentia</option>
<option value="VI">Vicenza</option>
<option value="VT">Viterbo</option>
</select>
On iPad/Safari, I noticed that the target value was selected (checked) <option value="RM" selected="selected">Roma</option> but not displaying. any help will be highly appreciated. Thanks.
i want to do multiple select drop down with checkboxes. I tried a lot but i am not getting correct result..
Here is my select box:
<div class="form-group">
<label>Choose Vendor</label>
<div class="checkbox">
<select class="form-control" multiple class="form-control" data-placeholder="user name" name="user_id[]">
<?php foreach($user as $rows) { ?>
<option value="<?php echo $rows->user_id?>">
<?php echo ucfirst($rows->first_name)?>
</option>
<?php } ?>
</select>
</div>
</div>
can anyone help me?
Thank you
Jquery Plugin Demo
You can apply this to your php code
$('select[multiple]').multiselect({
columns: 4,
placeholder: 'Select options'
});
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Multi-Select-List-with-Checkboxes-MultiSelect/jquery.multiselect.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Multi-Select-List-with-Checkboxes-MultiSelect/jquery.multiselect.js"></script>
<style>
body {
font-family: 'Open Sans' Arial, Helvetica, sans-serif
}
ul,
li {
margin: 0;
padding: 0;
list-style: nont;
}
.label {
color: #000;
font-size: 16px;
}
.container {
max-width: 728px;
}
</style>
<div class="container">
<h2>jQuery MultiSelect Basic Example</h2>
<select name="country" multiple class="form-control">
<option value="">Country...</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AG">Angola</option>
<option value="AI">Anguilla</option>
<option value="AG">Antigua & Barbuda</option>
<option value="AR">Argentina</option>
<option value="AA">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia</option>
<option value="BL">Bonaire</option>
<option value="BA">Bosnia & Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BR">Brazil</option>
<option value="BC">British Indian Ocean Ter</option>
<option value="BN">Brunei</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="IC">Canary Islands</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CD">Channel Islands</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CI">Christmas Island</option>
<option value="CS">Cocos Island</option>
<option value="CO">Colombia</option>
<option value="CC">Comoros</option>
<option value="CG">Congo</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CT">Cote D'Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CB">Curacao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="TM">East Timor</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FA">Falkland Islands</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="FS">French Southern Ter</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GB">Great Britain</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GN">Guinea</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HW">Hawaii</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IA">Iran</option>
<option value="IQ">Iraq</option>
<option value="IR">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="NK">Korea North</option>
<option value="KS">Korea South</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Laos</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macau</option>
<option value="MK">Macedonia</option>
<option value="MG">Madagascar</option>
<option value="MY">Malaysia</option>
<option value="MW">Malawi</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="ME">Mayotte</option>
<option value="MX">Mexico</option>
<option value="MI">Midway Islands</option>
<option value="MD">Moldova</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Nambia</option>
<option value="NU">Nauru</option>
<option value="NP">Nepal</option>
<option value="AN">Netherland Antilles</option>
<option value="NL">Netherlands (Holland, Europe)</option>
<option value="NV">Nevis</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NW">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau Island</option>
<option value="PS">Palestine</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PO">Pitcairn Island</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="ME">Republic of Montenegro</option>
<option value="RS">Republic of Serbia</option>
<option value="RE">Reunion</option>
<option value="RO">Romania</option>
<option value="RU">Russia</option>
<option value="RW">Rwanda</option>
<option value="NT">St Barthelemy</option>
<option value="EU">St Eustatius</option>
<option value="HE">St Helena</option>
<option value="KN">St Kitts-Nevis</option>
<option value="LC">St Lucia</option>
<option value="MB">St Maarten</option>
<option value="PM">St Pierre & Miquelon</option>
<option value="VC">St Vincent & Grenadines</option>
<option value="SP">Saipan</option>
<option value="SO">Samoa</option>
<option value="AS">Samoa American</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome & Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="OI">Somalia</option>
<option value="ZA">South Africa</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syria</option>
<option value="TA">Tahiti</option>
<option value="TW">Taiwan</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania</option>
<option value="TH">Thailand</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad & Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TU">Turkmenistan</option>
<option value="TC">Turks & Caicos Is</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States of America</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VS">Vatican City State</option>
<option value="VE">Venezuela</option>
<option value="VN">Vietnam</option>
<option value="VB">Virgin Islands (Brit)</option>
<option value="VA">Virgin Islands (USA)</option>
<option value="WK">Wake Island</option>
<option value="WF">Wallis & Futana Is</option>
<option value="YE">Yemen</option>
<option value="ZR">Zaire</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
<h2>optgroup Example</h2>
<select name="basicOptgroup[]" multiple="multiple">
<optgroup label="Programming Languages">
<option value="C++ / C#">C++ / C#</option>
<option value="Java">Java</option>
<option value="Objective-C">Objective-C</option>
</optgroup>
<optgroup label="Client-side scripting Languages">
<option value="JavaScript">JavaScript</option>
</optgroup>
<optgroup label="Server-side scripting Languages">
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Ruby on Rails">Ruby on Rails</option>
</optgroup>
<optgroup label="Mobile Platforms">
<option value="Android">Android</option>
<option value="iOS (iPhone, iPad and iPod Touch)">iOS (iPhone, iPad and iPod Touch)</option>
</optgroup>
<optgroup label="Document Markup Languages">
<option value="HTML">HTML</option>
<option value="SGML">SGML</option>
</optgroup>
<div class="mutliSelect">
<ul>
<li>
<input type="checkbox" value="Apple" />Apple</li>
<li>
<input type="checkbox" value="Blackberry" />Blackberry</li>
<li>
<input type="checkbox" value="HTC" />HTC</li>
<li>
<input type="checkbox" value="Sony Ericson" />Sony Ericson</li>
<li>
<input type="checkbox" value="Motorola" />Motorola</li>
<li>
<input type="checkbox" value="Nokia" />Nokia</li>
</ul>
</div>
check the link you will get answer.
https://codepen.io/elmahdim/pen/hlmri
<ul class="list-unstyled"><!-- bootstrap class -->
<?php
if($user ) {
while ($rows = $user->fetch_assoc()) {
?>
<li>
<input type="checkbox" value="<?php echo $rows['user_id'];?>" />
<?php echo $rows['first_name']; ?>
</li>
<?php } ?><!-- loop end -->
<?php } ?><!-- if end -->
</ul>
You should be able to loop the values of the selected checkboxes.