Coloured drop down menu not working in html - javascript

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>

Related

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>

how can css for select on Safari same Chrome

I have a select like this:
<select id="sbInBreak2_hh" name="sbInBreak2_hh">
<option value="0">00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</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>
</select>
On the Chrome it is Ok, the PM required me display on the Safari and IE same on the Chrome? How can css for it?
On Chrome
On Safari and IE

Try like this.
select::-ms-expand { display: none; }
select {
box-shadow:none;
outline:none;
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
background-repeat: no-repeat;
background-position-x: 21px;
background-position-y: 0px;
border: 1px solid #dfdfdf;
padding: 5px;
width: 44px;
}
/*select::-ms-expand { display: none; }*/
<select id="sbInBreak2_hh" name="sbInBreak2_hh" style="width:44px;">
<option value="0">00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</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>
</select>

You need to apply -webkit-appearance:none; and using background-image for select.

If I understand your question correctly, then you can add the following CSS to prevent the "highlighted" effect on IE and Safari:
#sbInBreak2_hh,
#sbInBreak2_hh:focus {
box-shadow:none; /* Prevent blurred border */
outline:none; /* Prevent hard outline */
}

Javascript: alternative or less complex code to create hidden input forms

I ask for your help to improve the form I created, keeping in mind that I am not a great expert in javascript programming.
I need to create a hotel search engine, with the possibility to choose the total number of rooms. Depending on the number of rooms selected, as many hidden form fields will be displayed, containing additional selection fields.
To make the idea of ​​what I have created better, I attach a screen.
To view the hidden fields in relation to the number of rooms chosen, I used this javascript code, repeated 5 times (maximum number of rooms).
function admSelectCheck(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("room1").value;
if(admOptionValue == nameSelect.value){
document.getElementById("pax_room_1").style.display = "block";
}
else{
document.getElementById("pax_room_1").style.display = "none";
}
}
else{
document.getElementById("pax_room_1").style.display = "none";
}
To realize the options for choosing each room, I used this javascript code repetition in proportion to the room number. That is: 1 room -> entered code 1 once; 2 rooms -> entered the code 2 times; etc.
function childSelect(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("child1").value;
if(admOptionValue == nameSelect.value){
document.getElementById("agechild1").style.display = "block";
}
else{
document.getElementById("agechild1").style.display = "none";
}
}
else{
document.getElementById("agechild1").style.display = "none";
}
if(nameSelect){
admOptionValue = document.getElementById("child2").value;
if(admOptionValue == nameSelect.value){
document.getElementById("agechild2").style.display = "block";
}
else{
document.getElementById("agechild2").style.display = "none";
}
}
else{
document.getElementById("agechild2").style.display = "none";
}
if(nameSelect){
admOptionValue = document.getElementById("child3").value;
if(admOptionValue == nameSelect.value){
document.getElementById("agechild3").style.display = "block";
}
else{
document.getElementById("agechild3").style.display = "none";
}
}
else{
document.getElementById("agechild3").style.display = "none";
}
}
$(function(){
$(':submit').click(function(){
$('select').each(function(){
if ( $(this).val() == '' )
{
$(this).remove(); // or
$(this).attr('disabled','disabled');
}
});
});
});
While, I used this html code repeated the same way.
<div class="container_hidden">
<div id="pax_room_1" style="display:none;" class="row_hidden">
<div class="nrRoom" style="width: 100px;background: #f5a445;font-size: 15px;text-align: center;height: 30px; padding-top: 5px; border-radius: 10px 10px 0px 0px;"><font color="#000"><img src="images/family-room.png" alt="Icon Family Room" style="width: 19px;" /> Room 1</font></div>
<div class="column"><font color="#000">Adult (18+)</font>
<select id="adulti" name="nrAdult">
<option value="">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div class="column"><font color="#000">Children (0-17)</font>
<select id="nrchild" name="nrChild" onchange="childSelect(this);">
<option value="">-</option>
<option id="child1" value="1">1</option>
<option id="child2" value="2">2</option>
<option id="child3" value="3">3</option>
</select>
</div>
<!-- Select Bambino 1 -->
<div id="agechild1" style="display:none;" class="row_hidden">
<div class="column"><font color="#000"> Child Age 1 </font>
<select id="child1" name="ageChild1">
<option value="">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">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>
</select>
</div>
</div>
<!-- Select Bambino 1-2 -->
<div id="agechild2" style="display:none;" class="row_hidden">
<div class="column"><font color="#000"> Child Age 1 </font>
<select id="child1" name="ageChild1">
<option value="">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">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>
</select>
</div>
<div class="column"><font color="#000"> Child Age 2 </font>
<select id="child2" name="ageChild2">
<option value="">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">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>
</select>
</div>
</div>
<!-- Select Bambino 1-2-3 -->
<div id="agechild3" style="display:none;" class="row_hidden">
<div class="column"><font color="#000"> Child Age 1 </font>
<select id="child1" name="ageChild1">
<option value="">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">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>
</select>
</div>
<div class="column"><font color="#000"> Child Age 2 </font>
<select id="child2" name="ageChild2">
<option value="">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">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>
</select>
</div>
<div class="column"><font color="#000"> Child Age 3 </font>
<select id="child3" name="ageChild3">
<option value="">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">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>
</select>
</div>
</div>
</div>
I realize that it is too laborious, even if it works. This is why I ask you if there is a way to lighten the code.

You can use the data-* attribute to dynamically choose the relations in the html.
e.g.
(function() {
const hiders = document.getElementsByClassName('hider');
// const is ES6 syntax, you can use var, although you might want to read up on that
for (let i = 0; i < hiders.length; ++i) {
const hider = hiders[i];
hider.onchange = function() {
const hideTarget = hider.dataset.hideTarget; // this reads the value of data-hide-target
if (hideTarget == null)
return; // no target set (else we would potentially get an TypeError, when data-hide-target wasn't set. Still happens with an invalid value though, but there you want an error
if (hider.value !== '')
document.getElementById(hideTarget).style.display = "block";
else
document.getElementById(hideTarget).style.display = "none";
// you might also want to take a look at .setAttribute("aria-hidden", "true") and .style.visibility = "hidden"
};
}
})()
<select id="adulti" name="nrAdult" class="hider" data-hide-target="hideme1">
<option value="">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<div id="hideme1" style="display: none;">
Hide me 1
</div>
<select id="adulti2" name="nrAdult" class="hider" data-hide-target="hideme2">
<option value="">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<div id="hideme2" style="display: none;">
Hide me 2
</div>
I think this snippet is rather easy to understand, but if you want me to elaborate a bit further, feel free to ask.
FYI, this can also be used for convenience in this example:
(function(){
function makeOption(val) {
const option = document.createElement('option');
option.value = val;
option.innerText = val;
return option;
}
const simpleSelects = document.getElementsByClassName('simpleSelect');
for(let i = 0; i < simpleSelects.length; ++i){
const simpleSelect = simpleSelects[i];
const min = simpleSelect.dataset.from;
const max = simpleSelect.dataset.to;
if(min == null || max == null)
return;
simpleSelect.appendChild(makeOption('-'));
for (let j = min; j <= max; ++j) {
simpleSelect.appendChild(makeOption(j));
}
}
})()
<select name="nrAdult" class="simpleSelect" data-from="0" data-to="5"></select>
<select name="nrChildren" class="simpleSelect" data-from="0" data-to="10"></select>
And I also just realised that you were using the same id multiple times, which is not only not allowed, but also doesn't work.
(And yes I am aware that what this does is quite different from what you want, but it is the same principle and I didn't want to give you an out-of-the-box solution.)

Chained Select Boxes (Country, State, City)

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>

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 :)

Categories