how to use multiple select dropdown with checkboxes - javascript

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.

Related

jQuery API calls not returning expected data [closed]

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);
});
}
});

Age in years from select tag dropdowns?

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>

Javascript attach onScroll event to select options to identify the scroll reached bottom

In my applications i have lot more selecte options. which can't be loaded at once. so i need to identify the scrollbar in the options dropdown weather it is reached bottom,so that i can append lot more options to the select field.
<!DOCTYPE html>
<html>
<head>
<title> Jquery Scroll </title>
</head>
<body>
<select id="sampleScroll" >
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">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, Plurinational State of</option>
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</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="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CD">Congo, the Democratic Republic of the</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Côte d'Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CW">Curaçao</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="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="FK">Falkland Islands (Malvinas)</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="TF">French Southern Territories</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="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="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and McDonald Islands</option>
<option value="VA">Holy See (Vatican City State)</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="IR">Iran, Islamic Republic of</option>
<option value="IQ">Iraq</option>
<option value="IE">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="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">Korea, Democratic People's Republic of</option>
<option value="KR">Korea, Republic of</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Lao People's Democratic Republic</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">Macao</option>
<option value="MK">Macedonia, the former Yugoslav Republic of</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</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="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</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="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestinian Territory, Occupied</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="PN">Pitcairn</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Réunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="BL">Saint Barthélemy</option>
<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="MF">Saint Martin (French part)</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and 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="SX">Sint Maarten (Dutch part)</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia and the South Sandwich Islands</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syrian Arab Republic</option>
<option value="TW">Taiwan, Province of China</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania, United Republic of</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</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</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela, Bolivarian Republic of</option>
<option value="VN">Viet Nam</option>
<option value="VG">Virgin Islands, British</option>
<option value="VI">Virgin Islands, U.S.</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
you can use select2 plugin,it take less time and along with search field.
<html lang="en">
<head>
<title>Jquery Select2 - Select Box with Search Option</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<div style="width:520px;margin:0px auto;margin-top:30px;height:500px;">
<h2>Select Box with Search Option Jquery Select2.js</h2>
<select class="myselect" style="width:500px;">
<option>Laravel</option>
<option>Laravel ACL</option>
<option>Laravel PDF</option>
<option>Laravel Helper</option>
<option>Laravel API</option>
<option>Laravel CRUD</option>
<option>Laravel Angural JS Crud</option>
<option>C++</option>
</select>
</div>
<script type="text/javascript">
$(".myselect").select2();
</script>
</body>
</html>

Fill Form Values With Javascript Using "Select Name"

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';

Unable to select an option from drodownlist using selenium remote driver in perl scripting

I am using Selenium::Remote::Driver module in perl Scripting. I am trying to select country from the dropdownlist in webpage which is not visible by selenium remote driver(dispaly as none),i have used so many methods but still it is not worked for me.can you please help me how to select that country from that dropdownlist.
use strict;
use warnings;
use Selenium::Remote::Driver;
use Selenium::Remote::WebElement;
use Time::HiRes qw(sleep);
my $driver = new Selenium::Remote::Driver
$driver ->get($url);
eval{$driver->find_element('register_address_country','id');};
if($#)
{
print "register adress country element not found \n";
}
else
{
print "element is found \n";
my $script = q{
var elem1 = window.document.findElementById(register_address_country);
return elem1;
};
my $elem2=$driver->execute_script($script,'DE');
$elem2->click();
}
}
#here the script is exited without performing any operation even the element is find
i am using this one also:
$driver->find_element("//select[\#id='register_address_country']/option[\#value='DE']")->click();
#here the element is find but not perform any operation like click or select
i am using this one also:
eval{$driver->find_elements('span','tag_name');};
if($#)
{
print "span tag_name elements are not found \n";
}
else
{
print "span tag elements are found \n";
my #values=$driver->find_elements('span','tag_name');
foreach my $r(#values)
{
print "rvalue:$r \n";
my $text1=$r->get_text();
print "text1:$text1 \n";
if($text1 eq 'Please choose your country')
{
$r->click();
print "selected \n";
last;
}
}
}
#here please choose text is find but not clicked that webelement
HTML code :
<div class="controls">
<select id="register_address_country" class="address-country selectBox" name="addressCountry" style="display: none;">
<option value="" selected="selected" data-localize="values.copv2.content.pleaseChooseCountry">Please choose your country</option>
<option value="AR">Argentina</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="BE">Belgium</option>
<option value="BR">Brazil</option>
<option value="CA">Canada</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DO">Dominican Republic</option>
<option value="EE">Estonia</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
<option value="GR">Greece</option>
<option value="IN">India</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JP">Japan</option>
<option value="LU">Luxembourg</option>
<option value="MX">Mexico</option>
<option value="NL">Netherlands</option>
<option value="NZ">New Zealand</option>
<option value="NO">Norway</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="ZA">South Africa</option>
<option value="KR">South Korea</option>
<option value="ES">Spain</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="TR">Turkey</option>
<option value="UK">United Kingdom</option>
<option value="US">United States</option>
<option value="">_____________________________</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="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</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="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="VG">British Virgin Islands</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="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CD">Congo (Democratic Republic of)</option>
<option value="CG">Congo (Peoples Republic of)</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="CI">Côte d'Ivoire</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="TL">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="FO">Faeroe Islands</option>
<option value="FK">Falkland Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="MK">Former Yugoslav Republic of Macedonia</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</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="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and McDonald Islands</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="IR">Iran</option>
<option value="IQ">Iraq</option>
<option value="IE">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="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="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</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="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia</option>
<option value="MD">Moldova</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="AN">Netherlands Antilles</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="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="KP">North Korea</option>
<option value="MP">Northern Marianas</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</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="PN">Pitcairn Islands</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RO">Romania</option>
<option value="RU">Russia</option>
<option value="RW">Rwanda</option>
<option value="RE">Réunion</option>
<option value="BL">Saint Barthélemy</option>
<option value="SH">Saint Helena</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</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="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia</option>
<option value="KR">South Korea</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syria</option>
<option value="ST">São Tomé and Príncipe</option>
<option value="TW">Taiwan</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania</option>
<option value="TH">Thailand</option>
<option value="BS">The Bahamas</option>
<option value="GM">The Gambia</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UM">US Minor Outlying Islands</option>
<option value="VI">US Virgin Islands</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="UK">United Kingdom</option>
<option value="US">United States</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VA">Vatican City</option>
<option value="VE">Venezuela</option>
<option value="VN">Vietnam</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
<a class="selectBox address-country selectBox-dropdown" style="width: 100px; display: inline-block; -moz-user-select: none;" title="" tabindex="0">
<span class="selectBox-label" style="width: 64px;">Please choose your country</span>
<span class="selectBox-arrow"/>
</a>
</div>
I ran into this same issue and, while not an explanation of how this occurs, I was able to 'hack' my way around this by simply adding another click.
So your example would look like this:
print "span tag elements are found \n";
my #values=$driver->find_elements('span','tag_name');
foreach my $r(#values)
{
print "rvalue:$r \n";
my $text1=$r->get_text();
print "text1:$text1 \n";
if($text1 eq 'Please choose your country')
{
$r->click();
$r->click();
print "selected \n";
last;
}
}
Try it, it worked for me.

Categories