Chained Select Boxes (Country, State, City) - javascript
I have a php page where I would like to select a location from a list of countries, states, and cities. The page contains other data for user signup (name, email, etc) so I don't want to refresh the page or anything when the select boxes refresh. Currently, each of the select boxes just load the full list of countries, states, or cities. I want them to be chained so I don't have duplicate city names (same name in different states or countries).
Locations are stored in a database, and are passed to the page on load. They are then looped through and added to the select box:
<tr>
<label>Select State: </label>
<select name="state" id="state_select" style="width:200px;">
<option value="">Select a State or Province</option>
<?php while($state = $states->fetchObject()) { ?>
<option value="<?php echo $state->id; ?>"><?php echo $state->title; ?></option>
<?php } ?>
</select>
</tr>
Database structure is pretty simple:
Country : | id | title |
State : | id | title | country_id |
City : | id | title | state_id |
I can think of logic in an .onChange() statement that should clear the chained select box and append new options, but I am very new to web based languages and I can't get anything working. Below is my attempt, but I guess I can't reference between js and php easily. Note: I am aware that this snippet is really bad and contains errors. My thoughts were to have a script function that does the following:
Clear out all options in the State selection box (assuming you have changed the country selection)
Loop through the supplied list of states (SQL query passed by the controller)
Put a selection option in the State selection box for each entry that has a 'country_id' that matches the selected country_id
^ This would be fantastic if it is possible. Any other methods would be good too, but I have tried using ajax and JSON methods and I honestly don't understand them.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('#country_select').change(function(){
$('#state_select').empty();
//for each state
<?php while($state = $states->fetchObject()) {
$temp = $('#country_select').val());
//if country matches selected country
if($state->country_id == $temp){
// create an option ?>
var option = '<option value="">Test</option>';
<?php// }
//then append that option?>
<?php// } ?>
$('#state_select').append(option);
});
});
</script>
$('#mobile_phone_network option:selected').val()i didn't tested but it should work. It's simple and it will give you some idea
**HTML**
<div id="countryWrap"><select id="country" name="country"></select></div>
<div id="stateWrap"><select id="state" name="state"></select></div>
<div id="cityWrap"><select id="city" name="city"></select></div>
<script>
$(document).ready(function(){
$('#country').change(function(){
loadState($(this).find(':selected').val())
})
$('#state').change(function(){
loadCity($(this).find(':selected').val())
})
})
function loadCountry(){
$.ajax({
type: "POST",
url: "ajax/ajax.php",
data: "get=country"
}).done(function( result ) {
$(result).each(function(){
$("#country").append($('<option>', {
value: this.id,
text: this.name,
}));
})
});
}
function loadState(countryId){
$("#state").children().remove()
$.ajax({
type: "POST",
url: "ajax/ajax.php",
data: "get=state&countryId=" + countryId
}).done(function( result ) {
$(result).each(function(){
$("#state").append($('<option>', {
value: this.id,
text: this.name,
}));
})
});
}
function loadCity(stateId){
$("#city").children().remove()
$.ajax({
type: "POST",
url: "ajax/ajax.php",
data: "get=city&stateId=" + stateId
}).done(function( result ) {
$(result).each(function(){
$("#city").append($('<option>', {
value: this.id,
text: this.name,
}));
})
});
}
// init the countries
loadCountry();
</script>
**ajax.php**
$countryId = isset($_POST['countryId']) ? $_POST['countryId'] : 0;
$stateId = isset($_POST['stateId']) ? $_POST['stateId'] : 0;
$command = isset($_POST['get']) ? $_POST['get'] : "";
switch($command){
case "country":
$statement = "SELECT id, name FROM country";
break;
case "state":
$statement = "SELECT id, name FROM state WHERE country_id=".(int)countryId;
break;
case "city":
$statement = "SELECT id, name FROM country WHERE state_id=".(int)stateId;
break;
default:
break;
}
$sth = $dbh->prepare($statement);
$sth->execute();
$result = $sth->fetchAll();
echo json_encode($result);
exit();
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
<!-- ****************For State Loads Starts***************************-->
$("#field6").change(function (e){
var state =
{
'0': ['Not Available'],
'Z1':['Australian Capital Territory','New South Wales',
'Northern Territory','Queensland','South Australia',
'Tasmania','Victoria','Western Australia'],
'IN':['Delhi','Maharashtra','TamilNadu','Karnataka','Haryana',
'Uttar Pradesh','Andhra Pradesh','Jammu and Kashmir',
'West Bengal','Gujarat','Madhya Pradesh','Kerala',
'Punjab','Bihar','Rajasthan','Orissa','Assam','NA',
'Himachal Pradesh','Chhattisgarh'],
'MY':['Johor','Kedah','Kelantan','Kuala Lumpur','Labuan','Melaka',
'Negeri Sembilan','Pahang','Penang','Perak','Perlis','Sabah',
'Sarawak','Selangor','Terengganu'],
'CN':['Beijing','Anhui','Chongqing','Fujian','Gansu','Guangdong',
'Guangxi','Guizhou','Hainan','Hebei','Heilongjiang','Henan',
'Hubei','Hunan','Jiangsu','Jiangxi','Jilin','Liaoning','Nei',
'Mongol','Ningxia','Qinghai','Shaanxi','Shandong',
'Shanghai','Shanxi','Sichuan','Tianjin',
'Xinjiang','Xizang','(Tibet)','Yunnan','Zhejiang']
}
var value = this.value;
// Access the object like city['CT'] .. That gives the Array
state[value] !== undefined ? state[value] : '0';
var stateOptions = state[value];
var $field8 = $('#field8'),
$field9 = $('#field9');
$field8.html(''); // clear the existing options
$field9.html(''); // clear the existing options
$.each(stateOptions, function (i, o) {
$('<option>' + o + '</option>').appendTo('#field8');
});// ------------>each end tag
});//----------------->on-change end tag
<!-- ****************For State Loads Ended***************************-->
<!-- ****************For City Loads Starts***************************-->
$("#field8").change(function (e){
var city =
{
'0': ['Not Available'],
'TamilNadu' : ['Coimbatore','Mettupalyam','Karur','Pollachi'],
'Karnataka' : ['Bangalore','Mysore','Bellary','Mandya','Chikmagalur'
,'Chamarajanagar','Udupi','Chikkaballapura'],
'Delhi' : ['Faridabad','Panchkula','Sonipat','Hisar','Palwal','Thanesar']
}
var value = this.value;
city[value] !== undefined ? city[value] : '0';
var cityOptions = city[value];
var $field9 = $('#field9');
$field9.html(''); // clear the existing options
$.each(cityOptions, function (j, k) {
$('<option>' + k + '</option>').appendTo('#field9');
});// ------------>each end tag
});//----------------->on-change end tag
<!-- ****************For City Loads Ended***************************-->
}); //-------------------->ready end tag
</script>
HTML Tag :
<div id="formElement6" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px" >
<div class="field-wrapper" style="float: left; width: 100%; clear: both" >
<div class="_100" style="float: left; width: 96%; margin-right: 2%; margin-left: 2%" >
<p style="position: relative; margin: 0px; padding: 0px" >
<label for="Country" style="display: block; line-height: 150%; padding: 1px 0pt 3px; white-space: nowrap" >Country</label>
<select id="field6" name="Country" style="width: 100%" >
<option value="" selected="selected" >--Please Select--</option>
<option value="YE" >Yemen</option>
<option value="YT" >Mayotte</option>
<option value="Z1" >Austria-SEAD</option>
<option value="ZA" >South Africa</option>
<option value="ZM" >Zambia</option>
<option value="ZW" >Zimbabwe</option>
<option value="ZY" >Taiwan(CO Only)</option>
<option value="ZZ" >Others</option>
<option value="AM" >Armenia</option>
<option value="GB" >United Kingdom</option>
<option value="SI" >Slovenia</option>
<option value="LS" >Lesotho</option>
<option value="MC" >Monaco</option>
<option value="CU" >Cuba</option>
<option value="SL" >Sierra Leone</option>
<option value="FO" >Faroe Islands</option>
<option value="GQ" >Equatorial Guin</option>
<option value="IN" >India</option>
<option value="KY" >Cayman Islands</option>
<option value="ME" >Montenegro</option>
<option value="MN" >Mongolia</option>
<option value="AF" >Afghanistan</option>
<option value="AZ" >Azerbaijan</option>
<option value="BS" >Bahamas</option>
<option value="CK" >Cook Islands</option>
<option value="EC" >Ecuador</option>
<option value="MY" >Malaysia</option>
<option value="NZ" >New Zealand</option>
<option value="QA" >Qatar</option>
<option value="SJ" >Svalbard</option>
<option value="IR" >Iran</option>
<option value="KI" >Kiribati</option>
<option value="LC" >St. Lucia</option>
<option value="MD" >Moldova</option>
<option value="BI" >Burundi</option>
<option value="BW" >Botswana</option>
<option value="CH" >Switzerland</option>
<option value="CY" >Cyprus</option>
<option value="PE" >Peru</option>
<option value="PS" >Palestine</option>
<option value="SA" >Saudi Arabia</option>
<option value="SO" >Somalia</option>
<option value="GY" >Guyana</option>
<option value="KR" >South Korea</option>
<option value="AO" >Angola</option>
<option value="BZ" >Belize</option>
<option value="MX" >Mexico</option>
<option value="RU" >Russian Fed.</option>
<option value="MR" >Mauretania</option>
<option value="SH" >Saint Helena</option>
<option value="FJ" >Fiji</option>
<option value="FK" >Falkland Islnds</option>
<option value="FM" >Micronesia</option>
<option value="FR" >France</option>
<option value="GA" >Gabon</option>
<option value="GD" >Grenada</option>
<option value="GE" >Georgia</option>
<option value="GF" >French Guayana</option>
<option value="GG" >GUERNSEY</option>
<option value="GH" >Ghana</option>
<option value="GI" >Gibraltar</option>
<option value="GL" >Greenland</option>
<option value="GM" >Gambia</option>
<option value="GN" >Guinea</option>
<option value="GP" >Guadeloupe</option>
<option value="GR" >Greece</option>
<option value="GS" >S. Sandwich Ins</option>
<option value="GT" >Guatemala</option>
<option value="GU" >Guam</option>
<option value="GW" >Guinea-Bissau</option>
<option value="HK" >Hong Kong</option>
<option value="HM" >Heard/McDon.Isl</option>
<option value="HN" >Honduras</option>
<option value="HR" >Croatia</option>
<option value="HT" >Haiti</option>
<option value="HU" >Hungary</option>
<option value="ID" >Indonesia</option>
<option value="IE" >Ireland</option>
<option value="IL" >Israel</option>
<option value="IO" >Brit.Ind.Oc.Ter</option>
<option value="IQ" >Iraq</option>
<option value="IS" >Iceland</option>
<option value="IT" >Italy</option>
<option value="JE" >JERSEY</option>
<option value="JM" >Jamaica</option>
<option value="JO" >Jordan</option>
<option value="JP" >Japan</option>
<option value="KE" >Kenya</option>
<option value="KG" >Kyrgyzstan</option>
<option value="KH" >Cambodia</option>
<option value="KM" >Comoros</option>
<option value="KN" >St Kitts&Nevis</option>
<option value="KP" >North Korea</option>
<option value="KW" >Kuwait</option>
<option value="KZ" >Kazakhstan</option>
<option value="LA" >Laos</option>
<option value="LB" >Lebanon</option>
<option value="LI" >Liechtenstein</option>
<option value="LK" >Sri Lanka</option>
<option value="LR" >Liberia</option>
<option value="LT" >Lithuania</option>
<option value="LU" >Luxembourg</option>
<option value="LV" >Latvia</option>
<option value="LY" >Libya</option>
<option value="M4" >MIAMI</option>
<option value="MA" >Morocco</option>
<option value="MF" >SAINT MARTIN</option>
<option value="MG" >Madagascar</option>
<option value="MH" >Marshall Islnds</option>
<option value="MK" >Macedonia</option>
<option value="ML" >Mali</option>
<option value="MM" >Myanmar</option>
<option value="MO" >Macau</option>
<option value="MP" >N.Mariana Islnd</option>
<option value="MQ" >Martinique</option>
<option value="MS" >Montserrat</option>
<option value="MT" >Malta</option>
<option value="AD" >Andorra</option>
<option value="AE" >Utd.Arab Emir.</option>
<option value="AG" >Antigua/Barbuda</option>
<option value="AI" >Anguilla</option>
<option value="AL" >Albania</option>
<option value="AN" >Dutch Antilles</option>
<option value="AQ" >Antarctica</option>
<option value="AR" >Argentina</option>
<option value="AS" >Samoa, America</option>
<option value="AT" >Austria</option>
<option value="AU" >Australia</option>
<option value="AW" >Aruba</option>
<option value="AX" >Åland</option>
<option value="BA" >Bosnia-Herz.</option>
<option value="BB" >Barbados</option>
<option value="BD" >Bangladesh</option>
<option value="BE" >Belgium</option>
<option value="BF" >Burkina Faso</option>
<option value="BG" >Bulgaria</option>
<option value="BH" >Bahrain</option>
<option value="BJ" >Benin</option>
<option value="BL" >Blue</option>
<option value="BM" >Bermuda</option>
<option value="BN" >Brunei Daruss.</option>
<option value="BO" >Bolivia</option>
<option value="BR" >Brazil</option>
<option value="BT" >Bhutan</option>
<option value="BV" >Bouvet Islands</option>
<option value="BY" >Belarus</option>
<option value="C2" >Canary Island</option>
<option value="C3" >CURACAO</option>
<option value="CA" >Canada</option>
<option value="CC" >Coconut Islands</option>
<option value="CD" >Dem. Rep. Congo</option>
<option value="CF" >CAR</option>
<option value="CG" >Rep.of Congo</option>
<option value="CI" >Cote d'Ivoire</option>
<option value="CL" >Chile</option>
<option value="CM" >Cameroon</option>
<option value="CN" >China</option>
<option value="CO" >Colombia</option>
<option value="CR" >Costa Rica</option>
<option value="CS" >Serbia/Monten.</option>
<option value="CV" >Cape Verde</option>
<option value="CX" >Christmas Islnd</option>
<option value="CZ" >Czech Republic</option>
<option value="DE" >Germany</option>
<option value="DJ" >Djibouti</option>
<option value="DK" >Denmark</option>
<option value="DM" >Dominica</option>
<option value="DO" >Dominican Rep.</option>
<option value="DZ" >Algeria</option>
<option value="EE" >Estonia</option>
<option value="EG" >Egypt</option>
<option value="EH" >West Sahara</option>
<option value="ER" >Eritrea</option>
<option value="ES" >Spain</option>
<option value="ET" >Ethiopia</option>
<option value="EU" >European Union</option>
<option value="FI" >Finland</option>
<option value="MU" >Mauritius</option>
<option value="MV" >Maldives</option>
<option value="MW" >Malawi</option>
<option value="MZ" >Mozambique</option>
<option value="NA" >Namibia</option>
<option value="NC" >New Caledonia</option>
<option value="NE" >Niger</option>
<option value="NF" >Norfolk Islands</option>
<option value="NG" >Nigeria</option>
<option value="NI" >Nicaragua</option>
<option value="NL" >Netherlands</option>
<option value="NO" >Norway</option>
<option value="NP" >Nepal</option>
<option value="NR" >Nauru</option>
<option value="NT" >NATO</option>
<option value="NU" >Niue</option>
<option value="OM" >Oman</option>
<option value="OR" >Orange</option>
<option value="PA" >Panama</option>
<option value="PF" >Frenc.Polynesia</option>
<option value="PG" >Pap. New Guinea</option>
<option value="PH" >Philippines</option>
<option value="PK" >Pakistan</option>
<option value="PL" >Poland</option>
<option value="PM" >St.Pier,Miquel.</option>
<option value="PN" >Pitcairn Islnds</option>
<option value="PR" >Puerto Rico</option>
<option value="PT" >Portugal</option>
<option value="PW" >Palau</option>
<option value="PY" >Paraguay</option>
<option value="RE" >Reunion</option>
<option value="RO" >Romania</option>
<option value="RS" >Serbia</option>
<option value="RW" >Rwanda</option>
<option value="S1" >SAIPAN</option>
<option value="SB" >Solomon Islands</option>
<option value="SC" >Seychelles</option>
<option value="SD" >Sudan</option>
<option value="SE" >Sweden</option>
<option value="SG" >Singapore</option>
<option value="SK" >Slovakia</option>
<option value="SM" >San Marino</option>
<option value="SN" >Senegal</option>
<option value="SR" >Suriname</option>
<option value="SS" >South Sudan</option>
<option value="ST" >S.Tome,Principe</option>
<option value="SV" >El Salvador</option>
<option value="SY" >Syria</option>
<option value="SZ" >Swaziland</option>
<option value="T1" >TAHITI</option>
<option value="TC" >Turksh Caicosin</option>
<option value="TD" >Chad</option>
<option value="TF" >French S.Territ</option>
<option value="TG" >Togo</option>
<option value="TH" >Thailand</option>
<option value="TJ" >Tajikistan</option>
<option value="TK" >Tokelau Islands</option>
<option value="TL" >East Timor</option>
<option value="TM" >Turkmenistan</option>
<option value="TN" >Tunisia</option>
<option value="TO" >Tonga</option>
<option value="TP" >East Timor</option>
<option value="TR" >Turkey</option>
<option value="TT" >Trinidad,Tobago</option>
<option value="TV" >Tuvalu</option>
<option value="TW" >Taiwan</option>
<option value="TZ" >Tanzania</option>
<option value="UA" >Ukraine</option>
<option value="UG" >Uganda</option>
<option value="UM" >Minor Outl.Isl.</option>
<option value="UN" >United Nations</option>
<option value="US" >USA</option>
<option value="UY" >Uruguay</option>
<option value="UZ" >Uzbekistan</option>
<option value="VA" >Vatican City</option>
<option value="VC" >St. Vincent</option>
<option value="VE" >Venezuela</option>
<option value="VG" >Brit.Virgin Is.</option>
<option value="VI" >Amer.Virgin Is.</option>
<option value="VN" >Vietnam</option>
<option value="VU" >Vanuatu</option>
<option value="WF" >Wallis,Futuna</option>
<option value="WS" >Samoa</option>
<option value="XK" >Kosovo</option>
</select>
</p>
</div>
</div>
</div>
<div id="formElement7" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px" >
<div class="field-wrapper" style="float: left; width: 100%; clear: both" >
<div class="_100" style="float: left; width: 96%; margin-right: 2%; margin-left: 2%" >
<p style="position: relative; margin: 0px; padding: 0px" >
<input id="field7" type="hidden" name="DataSource" value="" />
</p>
</div>
</div>
</div>
<div id="formElement8" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px" >
<div class="field-wrapper" style="float: left; width: 100%; clear: both" >
<div class="_100" style="float: left; width: 96%; margin-right: 2%; margin-left: 2%" >
<p style="position: relative; margin: 0px; padding: 0px" >
<label for="state" style="display: block; line-height: 150%; padding: 1px 0pt 3px; white-space: nowrap" >State</label>
<select id="field8" name="state" style="width: 100%" >
<option value="First" >First</option>
<option value="Second" >Second</option>
<option value="Third" >Third</option>
</select>
</p>
</div>
</div>
</div>
<div id="formElement9" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px" >
<div class="field-wrapper" style="float: left; width: 100%; clear: both" >
<div class="_100" style="float: left; width: 96%; margin-right: 2%; margin-left: 2%" >
<p style="position: relative; margin: 0px; padding: 0px" >
<label for="city" style="display: block; line-height: 150%; padding: 1px 0pt 3px; white-space: nowrap" >City</label>
<select id="field9" name="city" style="width: 100%" >
<option value="First" >First</option>
<option value="Second" >Second</option>
<option value="Third" >Third</option>
</select>
</p>
</div>
</div>
</div>
Related
Coloured drop down menu not working in html
This is my code. I want to highlight the border of the dropdown in red if the checkbox is checked and if the value is 0. If the value is not zero and the checkbox's checked, green, if the checkbox is not selected, gray.
It gives me error but i cannot understand why.
In the js script i tried to insert another else, outside of the first if, but when i do that, the code doesn't work. If i do not insert that, the code works properly, but when i uncheck the checkbox, the colour red/green doesn't go away
setInterval(() => {
document.querySelectorAll('input[type="checkbox"]').forEach((checkbox, index) => {
const select = document.querySelector(`#punteggio${index+1}`);
if (checkbox.checked) {
if (select.value === '0') {
select.style.borderColor = 'red';
select.style.borderWidth = '2px';
}
}
});
}, 100);
[id^="punteggio"] {padding: 8px 10px; border-radius: 5px; border: 1px solid gray; font-size: 16px;}
section {margin: 30px 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
label, input {display:block; margin-bottom: 10px; font-size: 1.2em;}
label {font-weight: bold; min-width: 150px; display: inline-block;}
input[type="text"], input[type="checkbox"]{padding: 10px;border-radius: 5px; border: 1px solid lightgray; width: 100%;}
button[type="button"] {width: 100%;padding: 10px; background-color: lightblue; border-radius: 5px; color: #000;cursor: pointer;margin-top: 20px;}
#checkbox1 {width: 20px; height: 20px;border-radius: 15px; margin-right: 10px;}
<ol id = "ordered">
<li>
<select id="punteggio1" >
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
<option value="3">3</option>
<option value="3.5">3.5</option>
<option value="4">4</option>
<option value="4.5">4.5</option>
<option value="5">5</option>
<option value="5.5">5.5</option>
<option value="6">6</option>
<option value="6.5">6.5</option>
<option value="7">7</option>
<option value="7.5">7.5</option>
<option value="8">8</option>
<option value="8.5">8.5</option>
<option value="9">9</option>
<option value="9.5">9.5</option>
<option value="10">10</option>
</select>
<input type="checkbox" name="item" value="Secondo esercizio" id = "checkbox1" style="display: inline-block;">Primo esercizio
</li>
<hr>
<li>
<select id="punteggio2">
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
<option value="3">3</option>
<option value="3.5">3.5</option>
<option value="4">4</option>
<option value="4.5">4.5</option>
<option value="5">5</option>
<option value="5.5">5.5</option>
<option value="6">6</option>
<option value="6.5">6.5</option>
<option value="7">7</option>
<option value="7.5">7.5</option>
<option value="8">8</option>
<option value="8.5">8.5</option>
<option value="9">9</option>
<option value="9.5">9.5</option>
<option value="10">10</option>
</select>
<input type="checkbox" name="item" value="Secondo esercizio" id = "checkbox1" style="display: inline-block;">Secondo esercizio</input>
</li>
<hr>
<li>
<select id="punteggio3">
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
<option value="3">3</option>
<option value="3.5">3.5</option>
<option value="4">4</option>
<option value="4.5">4.5</option>
<option value="5">5</option>
<option value="5.5">5.5</option>
<option value="6">6</option>
<option value="6.5">6.5</option>
<option value="7">7</option>
<option value="7.5">7.5</option>
<option value="8">8</option>
<option value="8.5">8.5</option>
<option value="9">9</option>
<option value="9.5">9.5</option>
<option value="10">10</option>
</select>
<input type="checkbox" name="item" value="Terzo esercizio" id = "checkbox1" style="display: inline-block;">Terzo Esercizio</input>
</li>
<hr>
</ol>
setInterval(() => {
document.querySelectorAll('#ordered li').forEach((li) => {
const select = li.querySelector('select')
const checkbox = li.querySelector('input[type=checkbox]')
if(checkbox.checked) {
if(select.value == '0') {
select.style.borderColor = 'red';
}
else {
select.style.borderColor = 'green';
}
}
else {
select.style.borderColor = 'grey';
}
});
}, 100);
setInterval(() => {
document.querySelectorAll('input[type="checkbox"]').forEach((checkbox, index) => {
const select = document.querySelector(`#punteggio${index+1}`);
if (checkbox.checked) {
if (select.value === '0') {
select.style.borderColor = 'red';
select.style.borderWidth = '2px';
}else{
select.style.borderColor = 'green';
select.style.borderWidth = '2px';
}
}
});
}, 100);
[id^="punteggio"] {padding: 8px 10px; border-radius: 5px; border: 2px solid gray; font-size: 16px;}
section {margin: 30px 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
label, input {display:block; margin-bottom: 10px; font-size: 1.2em;}
label {font-weight: bold; min-width: 150px; display: inline-block;}
input[type="text"], input[type="checkbox"]{padding: 10px;border-radius: 5px; border: 1px solid lightgray; width: 100%;}
button[type="button"] {width: 100%;padding: 10px; background-color: lightblue; border-radius: 5px; color: #000;cursor: pointer;margin-top: 20px;}
#checkbox1 {width: 20px; height: 20px;border-radius: 15px; margin-right: 10px;}
<ol id = "ordered">
<li>
<select id="punteggio1" >
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
<option value="3">3</option>
<option value="3.5">3.5</option>
<option value="4">4</option>
<option value="4.5">4.5</option>
<option value="5">5</option>
<option value="5.5">5.5</option>
<option value="6">6</option>
<option value="6.5">6.5</option>
<option value="7">7</option>
<option value="7.5">7.5</option>
<option value="8">8</option>
<option value="8.5">8.5</option>
<option value="9">9</option>
<option value="9.5">9.5</option>
<option value="10">10</option>
</select>
<input type="checkbox" name="item" value="Secondo esercizio" id = "checkbox1" style="display: inline-block;">Primo esercizio
</li>
<hr>
<li>
<select id="punteggio2">
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
<option value="3">3</option>
<option value="3.5">3.5</option>
<option value="4">4</option>
<option value="4.5">4.5</option>
<option value="5">5</option>
<option value="5.5">5.5</option>
<option value="6">6</option>
<option value="6.5">6.5</option>
<option value="7">7</option>
<option value="7.5">7.5</option>
<option value="8">8</option>
<option value="8.5">8.5</option>
<option value="9">9</option>
<option value="9.5">9.5</option>
<option value="10">10</option>
</select>
<input type="checkbox" name="item" value="Secondo esercizio" id = "checkbox1" style="display: inline-block;">Secondo esercizio</input>
</li>
<hr>
<li>
<select id="punteggio3">
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
<option value="3">3</option>
<option value="3.5">3.5</option>
<option value="4">4</option>
<option value="4.5">4.5</option>
<option value="5">5</option>
<option value="5.5">5.5</option>
<option value="6">6</option>
<option value="6.5">6.5</option>
<option value="7">7</option>
<option value="7.5">7.5</option>
<option value="8">8</option>
<option value="8.5">8.5</option>
<option value="9">9</option>
<option value="9.5">9.5</option>
<option value="10">10</option>
</select>
<input type="checkbox" name="item" value="Terzo esercizio" id = "checkbox1" style="display: inline-block;">Terzo Esercizio</input>
</li>
<hr>
</ol>
How to Limit the option size within 10 [duplicate]
This question already has answers here: How to Set Height for the Drop Down of Select box (9 answers) Closed 2 years ago. this is my current code that i used to display dropdown option. <select id="NotificationDate" style="display: table-cell; border-radius: 0.3em; color: rgb(0, 0, 0); outline: currentcolor none medium; box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 0px; font-size: 13px; font-family: "Lucida Grande", Tahoma; width: 215px; height: 20px; border: 1px none; background: lightblue none repeat scroll 0% 0%; margin-left: 15px; margin-bottom: 5px;"> <option value="2020/02/19">2020/02/19</option> <option value="2019/10/23">2019/10/23</option> <option value="2019/08/14">2019/08/14</option> <option value="2019/07/11">2019/07/11</option> <option value="2019/06/17">2019/06/17</option> <option value="2019/05/16">2019/05/16</option> <option value="2019/04/11">2019/04/11</option> <option value="2019/03/18">2019/03/18</option> <option value="2019/02/11">2019/02/11</option> <option value="2019/01/30">2019/01/30</option> <option value="2018/12/20">2018/12/20</option> <option value="2018/11/19">2018/11/19</option> <option value="2018/10/17">2018/10/17</option> <option value="2018/09/14">2018/09/14</option> <option value="2018/08/14">2018/08/14</option> <option value="2018/07/18">2018/07/18</option> <option value="2018/06/22">2018/06/22</option> <option value="2018/05/14">2018/05/14</option> <option value="2018/04/11">2018/04/11</option> <option value="2018/03/12">2018/03/12</option> <option value="2018/02/19">2018/02/19</option> <option value="2018/01/11">2018/01/11</option> <option value="2017/12/13">2017/12/13</option> <option value="2017/11/14">2017/11/14</option> <option value="2017/10/11">2017/10/11</option> <option value="2017/09/19">2017/09/19</option> <option value="2017/08/14">2017/08/14</option> <option value="2017/07/13">2017/07/13</option> <option value="2017/06/12">2017/06/12</option> <option value="2017/05/11">2017/05/11</option> <option value="2017/04/13">2017/04/13</option> <option value="2017/03/13">2017/03/13</option> <option value="2017/02/15">2017/02/15</option> <option value="2017/01/11">2017/01/11</option> <option value="2016/12/14">2016/12/14</option> <option value="2016/11/11">2016/11/11</option> <option value="2016/10/11">2016/10/11</option> <option value="2016/09/13">2016/09/13</option> <option value="2016/08/11">2016/08/11</option> <option value="2016/07/11">2016/07/11</option> <option value="2016/06/13">2016/06/13</option> <option value="2016/04/11">2016/04/11</option> <option value="2016/03/11">2016/03/11</option> <option value="2016/02/11">2016/02/11</option> <option value="2016/01/11">2016/01/11</option> <option value="2015/12/17">2015/12/17</option> <option value="2015/11/11">2015/11/11</option> <option value="2015/10/12">2015/10/12</option> <option value="2015/09/11">2015/09/11</option> <option value="2015/08/11">2015/08/11</option> <option value="2015/07/14">2015/07/14</option> <option value="2015/06/11">2015/06/11</option> <option value="2015/05/13">2015/05/13</option> <option value="2015/04/13">2015/04/13</option> <option value="2015/03/11">2015/03/11</option> <option value="2015/02/11">2015/02/11</option> <option value="2015/01/12">2015/01/12</option> <option value="2014/12/16">2014/12/16</option> <option value="2014/12/11">2014/12/11</option> <option value="2014/11/11">2014/11/11</option> <option value="2014/10/14">2014/10/14</option> <option value="2014/09/18">2014/09/18</option> <option value="2014/09/15">2014/09/15</option> <option value="2014/08/13">2014/08/13</option> <option value="2014/07/15">2014/07/15</option> </select> you can see in the image,the list is going too long.i want it should display only 10 and remaining should be like scroll and select. [
Try this <div class="container"> <select onfocus='this.size=10;' onblur='this.size=1;' onchange='this.size=1; this.blur();'> <option value="">1 abc</option> <option value="">2 abc</option> <option value="">3 abc</option> <option value="">4 abc</option> <option value="">5 abc</option> <option value="">6 abc</option> <option value="">7 abc</option> <option value="">8 abc</option> <option value="">9 abc</option> <option value="">10 abc</option> <option value="">11 abc</option> <option value="">12 abc</option> <option value="">13 abc</option> <option value="">14 abc</option> <option value="">15 abc</option> <option value="">16 abc</option> <option value="">17 abc</option> <option value="">18 abc</option> <option value="">19 abc</option> <option value="">20 abc</option> </select> </div>
Referring to this answer: <select onfocus='this.size=10;' onblur='this.size=1;' onchange='this.blur();'> <option>option a</option> <option>option b</option> <option>option c</option> <option>option d</option> <option>option e</option> <option>option f</option> <option>option g</option> <option>option h</option> <option>option i</option> <option>option j</option> <option>option k</option> <option>option l</option> <option>option m</option> <option>option n</option> <option>option o</option> <option>option p</option> <option>option q</option> <option>option r</option> </select>
push the date variables in an array, iterate through them in a for loop and in the body of the for loop, set the scroll box elements to the last ten of the array from getting size minus 9.
Try this. It works for me
<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}" onchange='this.size=0;' onblur="this.size=0;">
<option value="1">This is select number 1</option>
<option value="2">This is select number 2</option>
<option value="3">This is select number 3</option>
<option value="4">This is select number 4</option>
<option value="5">This is select number 5</option>
<option value="6">This is select number 6</option>
<option value="7">This is select number 7</option>
<option value="8">This is select number 8</option>
<option value="9">This is select number 9</option>
<option value="10">This is select number 10</option>
<option value="11">This is select number 11</option>
<option value="12">This is select number 12</option>
</select>
Changing download link for button that updates based on selected values in drop down menu
I am trying to create a button on my website that allows you to download data when clicked. This link should update based on the selected value in the 4 drop down menus I have. The problem is my code does not work. Here is the code below:
<script>
function set_st(t) {
var sel_el = t.options[t.selectedIndex]
document.getElementById('my-iframe').src = 'http://watermonitor.gov/naww/index.php?st=' + sel_el.value
}
function set_st(t) {
var sel_el = t.options[t.selectedIndex]
document.getElementById('down').src = 'http://watermonitor.gov/naww/index.php?st=' + sel_el.value
}
</script>
<header>
<div id='map_container' style="margin-top: 100px; border: 0px solid red; text-align: center;">
<div id="xbuilder">
<table>
<tbody>
<tr>
<td>
<div>
United States:
<span data-tooltip='Choose a US state'>
<select name='usst' id='usst' size='1' onchange='set_st(this);' >
<option value=''>States</option>
</option>
<option value='al'>Alabama</option>
<option value='ak'>Alaska</option>
<option value='az'>Arizona</option>
<option value='ar'>Arkansas</option>
<option value='ca'>California</option>
<option value='co'>Colorado</option>
<option value='ct'>Connecticut</option>
<option value='de'>Delaware</option>
<option value='dc'>District of Columbia</option>
<option value='fl'>Florida</option>
<option value='ga'>Georgia</option>
<option value='hi'>Hawaii</option>
<option value='id'>Idaho</option>
<option value='il'>Illinois</option>
<option value='in'>Indiana</option>
<option value='ia'>Iowa</option>
<option value='ks'>Kansas</option>
<option value='ky'>Kentucky</option>
<option value='la'>Louisiana</option>
<option value='me'>Maine</option>
<option value='md'>Maryland</option>
<option value='ma'>Massachusetts</option>
<option value='mi'>Michigan</option>
<option value='mn'>Minnesota</option>
<option value='ms'>Mississippi</option>
<option value='mo'>Missouri</option>
<option value='mt'>Montana</option>
<option value='ne'>Nebraska</option>
<option value='nv'>Nevada</option>
<option value='nh'>New Hampshire</option>
<option value='nj'>New Jersey</option>
<option value='nm'>New Mexico</option>
<option value='ny'>New York</option>
<option value='nc'>North Carolina</option>
<option value='nd'>North Dakota</option>
<option value='oh'>Ohio</option>
<option value='ok'>Oklahoma</option>
<option value='or'>Oregon</option>
<option value='pa'>Pennsylvania</option>
<option value='ri'>Rhode Island</option>
<option value='sc'>South Carolina</option>
<option value='sd'>South Dakota</option>
<option value='tn'>Tennessee</option>
<option value='tx'>Texas</option>
<option value='ut'>Utah</option>
<option value='vt'>Vermont</option>
<option value='va'>Virginia</option>
<option value='wa'>Washington</option>
<option value='wv'>West Virginia</option>
<option value='wi'>Wisconsin</option>
<option value='wy'>Wyoming</option>
<option value='pr'>Puerto Rico</option>
</select>
</span>
<span data-tooltip='Choose a US water resource region'>
<select name='ushuc' id='ushuc' size='1' onchange='set_st(this);' >
<option value=''>Water Res. Region</option>
<option value='01'>01 New England</option>
<option value='02'>02 Mid Atlantic</option>
<option value='03'>03 South Atlantic-Gulf</option>
<option value='04'>04 Great Lakes</option>
<option value='05'>05 Ohio</option>
<option value='06'>06 Tennessee</option>
<option value='07'>07 Upper Mississippi</option>
<option value='08'>08 Lower Mississippi</option>
<option value='09'>09 Souris-Red-Rainy</option>
<option value='10'>10 Missouri</option>
<option value='11'>11 Arkansas-White-Red</option>
<option value='12'>12 Texas-Gulf</option>
<option value='13'>13 Rio Grande</option>
<option value='14'>14 Upper Colorado</option>
<option value='15'>15 Lower Colorado</option>
<option value='16'>16 Great Basin</option>
<option value='17'>17 Pacific Northwest</option>
<option value='18'>18 California</option>
<option value='19'>19 Alaska</option>
<option value='20'>20 Hawaii</option>
<option value='21'>21 Puerto Rico</option>
</select>
</span>
</div>
<div style="float: right; box-sizing: border-box;">
<form action="http://waterwatch.usgs.gov/download/?gt=map&ofmt=kmr&x=0&st=" id="down">
<input type="submit" value="Go to Google" / </form>
</div>
</td>
</tr>
<tr>
<td>
<div>
Canada:
<span data-tooltip='Choose a Canadian province'>
<select name='nus' id='nus' size='1' onchange='set_st(this);' >
<option value=''>Provinces</option>
<option value='zab'>Alberta</option>
<option value='zbc'>British Columbia</option>
<option value='zmb'>Manitoba</option>
<option value='znb'>New Brunswick</option>
<option value='znl'>Newfoundland and Labrador</option>
<option value='zns'>Nova Scotia</option>
<option value='znt'>Northwest Territories</option>
<option value='znu'>Nunavut</option>
<option value='zon'>Ontario</option>
<option value='zpe'>Prince Edward Island</option>
<option value='zqc'>Quebec</option>
<option value='zsk'>Saskatchewan</option>
<option value='zyt'>Yukon</option>
</select>
</span>
<span data-tooltip='Choose a Canadian river basin'>
<select name='nhuc' id='nhuc' size='1' onchange='set_st(this);' >
<option value=''>Canadian River Basins</option>
<option value='z01'>01 Maritime Provinces Drainage</option>
<option value='z02'>02 St.Lawrence River Drainage</option>
<option value='z03'>03 Northern Quebec Drainage</option>
<option value='z04'>04 Southwest Hudson Bay Drainage</option>
<option value='z05'>05 Nelson River Drainage</option>
<option value='z06'>06 Western Hudson Bay Drainage</option>
<option value='z07'>07 Great Slave Lake Drainage</option>
<option value='z08'>08 Pacific Drainage</option>
<option value='z09'>09 Yukon River Drainage</option>
<option value='z10'>10 Arctic Drainage</option>
<option value='z11'>11 Mississippi River Drainage</option>
</select>
</span>
</div>
<div style='margin-left: 10px; float: right;' data-tooltip="Click to view a map of specified region.">
<input name="go" value="Go" type="submit"/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</center>
</div>
</header>
<body>
<div class="center">
<div id="my-div">
<iframe src="http://watermonitor.gov/naww/index.php" id="my-iframe"></iframe>
</div>
</div>
<div class="legend">
<img name="legend" style="border: 0px" src="http://waterwatch.usgs.gov/new/images/map_legends/ptile_dot.gif" alt="map legend">
</div>
</body>
</html>
My question is about the button with id "down" and my attempt on a way to solve it in javascript is above.
Try this:
get selected value
$( "#usst" ).val();
and set src attribüte
$("#down").attr("src",url);
How to set tag of select in proper way to have the size of "5"
As you see in the snippet below , there are many options .
When I click the select tagment , a long list will appear before it become the size of 5 . You can try it . I don't want the wrong effect of it .
I tried mousedown event to prevent it but failed . How to controll it ?
$("#select").click(function(event){
event.preventDefault();
event.stopPropagation();
if ( !$(this).hasClass("size") ) {
$(this).attr("size","5");
$(this).addClass("size");
} else {
$(this).attr("size","1");
$(this).removeClass("size");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<select name="test" id="select">
asdfasdf
<option value="">option1</option>
<option value="">option2</option>
<option value="">option3</option>
<option value="">option4</option>
<option value="">option5</option>
<option value="">option6</option>
<option value="">option7</option>
<option value="">option8</option>
<option value="">option9</option>
<option value="">option8</option>
<option value="">option7</option>
<option value="">option6</option>
<option value="">option5</option>
<option value="">option4</option>
<option value="">option3</option>
<option value="">option2</option>
<option value="">option1</option>
<option value="">option2</option>
<option value="">option3</option>
<option value="">option4</option>
<option value="">option5</option>
<option value="">option6</option>
<option value="">option7</option>
<option value="">option8</option>
<option value="">option9</option>
<option value="">option0</option>
<option value="">option9</option>
<option value="">option8</option>
<option value="">option7</option>
<option value="">option6</option>
</select>
</div>
It can't become the size of one when blur.
try this
$("#select").one("click",function(){
if (!$("#select").hasClass("size")) {
$("#select").attr("size", "5");
$("#select").addClass("size");
} else {
$("#select").attr("size", "1");
$("#select").removeClass("size");
}
});
Saw this on another post the other day it had a good link to a working fiddle using jquery.
<select name="select1" onmousedown="if(this.options.length>8){this.size=2;}" onchange='this.size=0;' onblur="this.size=0;">
http://jsfiddle.net/aTzc2/
You can just set the this.size= to whatever you want.
<div id="myselect-container">
<select name="select1" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=5;">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
<option value="6">option 6</option>
<option value="7">option 7</option>
<option value="8">option 8</option>
<option value="9">option 9</option>
<option value="10">option 10</option>
<option value="11">option 11</option>
<option value="12">option 12</option>
</select>
</div>
css:
#myselect-container {
position:relative;
height:9px;
width:100px;
/*for contain our absoulte select tag */
}
#myselect-container select {
position:absolute;
/*for put our list on other tag */
}
$(function(){
$("#test").click(function(event){
event.preventDefault();
event.stopPropagation();
$(this).focus();
if ( $("option").length > 5 ) {
//选项超过五个
if ( !$(this).hasClass("size") ) {
//未打开状态时 展开下拉列表
$(this).attr("size","5").addClass("size");
} else {
//已打开状态时 收回下拉列表
$(this).attr("size","1").removeClass("size").blur();
}
} else {
//选项不超过五个
if ( !$(this).hasClass("size") ) {
//未打开状态时 展开下拉列表
$(this).attr("size" , $("option").length).addClass("size");
} else {
//已打开状态时 收回下拉列表
$(this).attr("size","1").removeClass("size").blur();
}
}
}).mousedown(function(event){
event.preventDefault();
}).blur(function(){
$(this).attr("size","1").removeClass("size");
}).change(function(){
//blur之后才会触发change
console.log($("option:selected").html());
});
$("option").click(function(event){
event.preventDefault();
console.log($(this).index());
$("option").eq($(this).index()).prop("selected","selected");
});
});
#test{
font-size: 30px;
position: fixed;
left: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="test" id="test" >
asdfasdf
<option value=""></option>
<option value="">asdfasfd2</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
</select>
z index is not working in inter explorer above pdf file
am displaying a selection bar above pdf file. Here is its link http://tashen.byethost13.com/flang.html It works in chrome and Firefox but not in IE.it goes behind the pdf file in IE. this is the code of a div and selection bar. <div style="height:100%; width:100%; background-color: rgba(125,55,55,0.5); position: fixed; z-index: 8000; " id="Outalertwind"> <select id="program_category_list" name="programcategory_list" style="margin-left:50px; width: 200px; height: 30px; background-color: rgba(125,55,55,0.5); z-index:5000000000; color:#FFF;" onchange="showpdf(this.value)"> <option value="sel">-- Select size --</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="32">32</option> <option value="40">40</option> <option value="50">50</option> <option value="65">65</option> <option value="80">80</option> <option value="100">100</option> <option value="125">125</option> <option value="150">150</option> <option value="200">200</option> <option value="250">250</option> <option value="300">300</option> <option value="350">350</option> <option value="375">375</option> <option value="400">400</option> <option value="450">450</option> <option value="500">500</option> <option value="500">600</option> </select> <button style="margin-right:30px; height: 30px; float: right; margin-top: 5px; background-color: #fa5c00" onclick="showpdf(this.value)">Cancel</button> </div> any help would be much appreciated . Thanks :)