Why select options created by JS are limited or are not shown?

Why select options created by JS are limited or are not shown? - javascript

A very interesting thing hapens to my code.I have 3 different selects,one for years, the second for months and the third for days.I created options for the years and days via JS. My problem is my years list starts from the start point but dosn't end in the finish point I give,but when I'm changing the start point of j to 300 for instance, everything works perfectly.What is the reason or maybe my code is not correct? https://jsfiddle.net/arminemash/f9gy1p4L/15/
select{float:left}
#month,#days,input{display:none}
<body onload='addOptions()'>
<form action=''>
<select required id='year' class='selectOption' onchange='select(this)'>
<option value=""> Select year</option>
</select>
<select required id='month' class='selectOption' onchange='select(this)'>
<option value=""> Select month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select required id='days' class='selectOption' onchange='select(this)'>
<option value="">Select Day</option>
</select>
<input type="submit" class='selectOption' onclick='getDate()'>
</form>
</body>
function addOptions(){
var x= document.getElementById('year');
var y = document.getElementById('days');
for(var i=1900,j=1;i<3000,j<=31;i++,j++){
var option1 = document.createElement("option");
var option2 = document.createElement("option");
option1.text =i;
x.add(option1);
option2.text =j;
y.add(option2);
}
}
var i=0;
function select(par){
var x=document.getElementsByClassName('selectOption');
if( par.selectedIndex !== "0"){
x[i+1].style.display='block';
i++;
collectData.push(par.value);
}
}

The problem is your for loop. for(var i=1900,j=1;i<3000,j<=31;i++,j++) this will stop when j reaches 31. What you need is two for loops one for days and one for years. I edited your fiddle here.

Related

Car Make/Model dynamic dropdown

I'm setting up a new form on my site, and I'm using some code I found here (Vehicle drop down selector). However, I'm using this code within a form, and once the form is submitted, the values for make/model aren't changed to their respective names, instead showing their form values. Being a complete JS noob, how would I go about changing the values submitted from values to make/model names?
$(document).ready(function() {
var $make = $('#make'),
$model = $('#model'),
$options = $model.find('option');
$make.on('change', function() {
$model.html($options.filter('[value="' + this.value + '"]'));
$model.trigger('change');
}).trigger('change');
var $model = $('#model'),
$year = $('#year'),
$yearOptions = $year.find('option');
$model.on('change', function() {
$year.html($yearOptions.filter('[value="' + this.value + '"]'));
$year.trigger('change');
}).trigger('change');
var $year = $('#year'),
$identifier = $('#identifier'),
$identifierOptions = $identifier.find('option');
$year.on('change', function() {
var filteredIdetifiers = $identifierOptions.filter('[value="' + this.value + '"]');
debugger
if (!($("#make").val() == 3 && $("#model option:selected").text() == 'Falcon')) {
filteredIdetifiers = filteredIdetifiers.filter(function(i, e) {
return e.value !== '3'
});
}
$identifier.html(filteredIdetifiers);
$identifier.trigger('change');
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Vehicle Brand Selector List -->
<select name="make" id="make">
<option value="0">Make</option>
<option value="1">BMW</option>
<option value="2">Daewoo</option>
<option value="3">Ford</option>
<option value="4">Holden</option>
<option value="5">Honda</option>
<option value="6">Hyundai</option>
<option value="7">Isuzu</option>
<option value="8">Kia</option>
<option value="9">Lexus</option>
<option value="10">Mazda</option>
<option value="11">Mitsubishi</option>
<option value="12">Nissan</option>
<option value="13">Peugeot</option>
<option value="14">Subaru</option>
<option value="15">Suzuki</option>
<option value="16">Toyota</option>
<option value="17">Volkswagen</option>
</select>
<!-- Vehicle Model List -->
<select name="model" id="model">
<option value="0">Model</option>
<option class="318i" value="1">318i</option>
<option class="lanos" value="2">Lanos</option>
<option class="courier" value="3">Courier</option>
<option class="falcon" value="3">Falcon</option>
<option class="festiva" value="3">Festiva</option>
<option class="fiesta" value="3">Fiesta</option>
<option class="focus" value="3">Focus</option>
<option class="laser" value="3">Laser</option>
<option class="ranger" value="3">Ranger</option>
<option class="territory" value="3">Territory</option>
<option class="astra" value="4">Astra</option>
<option class="barina" value="4">Barina</option>
<option class="captiva" value="4">Captiva</option>
<option class="colorado" value="4">Colorado</option>
<option class="commodore" value="4">Commodore</option>
<option class="cruze" value="4">Cruze</option>
<option class="rodeo" value="4">Rodeo</option>
<option class="viva" value="4">Viva</option>
</select>
<!-- Vehicle Year List -->
<select name="year" id="year">
<option value="0">Year</option>
<option value="1">1998</option>
<option value="1">1999</option>
<option value="1">2000</option>
<option value="1">2001</option>
<option value="1">2002</option>
<option value="1">2003</option>
<option value="1">2004</option>
<option value="1">2005</option>
<option value="2">1997</option>
<option value="2">1998</option>
<option value="2">1999</option>
<option value="2">2000</option>
<option value="2">2001</option>
<option value="2">2002</option>
<option value="2">2003</option>
<option value="3">1991-1999</option>
<option value="4">1997-2007</option>
<option value="5">1997-2007</option>
<option value="3">2002</option>
<option value="3">2003</option>
<option value="3">2004</option>
<option value="3">2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
</select>
<!-- Vehicle Identity List -->
<select name="identifier" id="identifier">
<option value="0">Type</option>
<option class="E46" value="1">E46</option>
<option class="1997-2003" value="2">N/A</option>
<option class="1997-2007" value="4">N/A</option>
<option class="1997-2007" value="5">N/A</option>
<option class="5041618" value="3">BA</option>
<option class="1997-2005" value="3">AU</option>
<option class="1997-2005" value="3">AU2</option>
<option class="1997-2005" value="4">N/A</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
</select>

In every <option> tag there is an attribute called value. This value attribute is what is returned at as the value of the dropdown when that option is selected. Seems like in the code you found they are all simply set to numbers. You can set them to be whatever you want though:
<option value="Ford">Ford</option>
<option class="focus" value="Focus">Focus</option>
FIXING DYNAMIC OPTIONS
I see that modifying the values directly affect how the dynamic options are displayed. For example the value attribute of the car model dropdown is used to filter the car make dropdown by only displaying options with the same value. Instead of using the model dropdown's value attributes to compare with make, we can add a new data- attribute called data-make and filter the model dropdown based on that instead. This allows you to freely modify the value attribute in model. The example code below shows this. You would need to modify your JS so model affects year, and year affects identifier in the same way.
$(document).ready(function() {
var $make = $('#make'),
$model = $('#model'),
$options = $model.find('option');
$make.on('change', function() {
// We now filter model using the data-make attribute, not value
$model.html($options.filter('[data-make="' + this.value + '"]'));
$model.trigger('change');
}).trigger('change');
$('#carForm').submit(function(e) {
e.preventDefault();
let formData = $(this).serializeArray();
let data = {};
for (let i = 0; i < formData.length; i++) {
data[formData[i].name] = formData[i].value;
}
alert('Make: ' + data.make + '\nModel: ' + data.model);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="carForm">
<select name="make" id="make">
<option value="0">Make</option>
<option value="BMW">BMW</option> <!-- These values are now make names -->
<option value="Daewoo">Daewoo</option>
<option value="Ford">Ford</option>
</select>
<!-- Vehicle Model List -->
<!-- Notice the new "data-make" attributes for each -->
<select name="model" id="model">
<option value="0">Model</option>
<option class="318i" value="318i" data-make="BMW">318i</option>
<option class="lanos" value="Lanos" data-make="Daewoo">Lanos</option>
<option class="courier" value="Courier" data-make="Ford">Courier</option>
<option class="falcon" value="Falcon" data-make="Ford">Falcon</option>
<option class="festiva" value="Festiva" data-make="Ford">Festiva</option>
<option class="fiesta" value="Fiesta" data-make="Ford">Fiesta</option>
<option class="focus" value="Focus" data-make="Ford">Focus</option>
</select>
<button type="submit">Submit</button>
</form>

You can get the selected option text like this.
$('#form').submit(function(e) {
e.preventDefault();
var make = $make.find(':selected').text();
}
But it would be good practice to set the value you expect to return as the option value and use a data attribute or class to handle the filtering logic.

Having issues with a javascript for loop += decimal variable [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Hi guys I am building a for loop which basically generates a dynamic select options form.
Everything works fine until I try and use a decimal value as an incrementer.
for instance a normal loop would be this:
for(i =0; i <= 10; i++){
// do some code
}
The issue I am facing is that everything that is being put in is dynamic including the increment which may need to increment with decimal figures!
For instance it may need this:
for(i =0; i <= 10.5;i+= 1.5){
//do some code
}
Now the thing is that again everything is dynamic so the actual end code looks like this:
for(thei = 0; thei <= calchours; thei += +thetype){
}
Everything works 100% if the "thetype" is just 1, but as soon as its a 1.5 it only loops a few times before exiting.
Here is the Example code of what I am trying to do:
Example Html Code:
<select class="form-control" id="bookingtype" name="bookingtype">
<option value="1" selected="">Hourly Bookings</option>
<option value="1.5">1 Hour Bookings With 30 Minute Intervals</option>
</select>
<select class="form-control" id="timefrom" name="timefrom">
<option value="N/A" selected="">N/A</option>
<option value="24">00:00</option>
<option value="01">01:00</option>
<option value="02">02:00</option>
<option value="03">03:00</option>
<option value="04">04:00</option>
<option value="05">05:00</option>
<option value="06">06:00</option>
<option value="07">07:00</option>
<option value="08">08:00</option>
<option value="09" selected="selected">09:00</option>
<option value="10">10:00</option>
<option value="11">11:00</option>
<option value="12">12:00</option>
<option value="13">13:00</option>
<option value="14">14:00</option>
<option value="15">15:00</option>
<option value="16">16:00</option>
<option value="17">17:00</option>
<option value="18">18:00</option>
<option value="19">19:00</option>
<option value="20">20:00</option>
<option value="21">21:00</option>
<option value="22">22:00</option>
<option value="23">23:00</option>
</select>
<select class="form-control" id="timeto" name="timeto">
<option value="N/A" selected="">N/A</option>
<option value="24">00:00</option>
<option value="00.5">00:30</option>
<option value="01">01:00</option>
<option value="01.5">01:30</option>
<option value="02">02:00</option>
<option value="02.5">02:30</option>
<option value="03">03:00</option>
<option value="03.5">03:30</option>
<option value="04">04:00</option>
<option value="04.5">04:30</option>
<option value="05">05:00</option>
<option value="05.5">05:30</option>
<option value="06">06:00</option>
<option value="06.5">06:30</option>
<option value="07">07:00</option>
<option value="07.5">07:30</option>
<option value="08">08:00</option>
<option value="08.5">08:30</option>
<option value="09">09:00</option>
<option value="09.5">09:30</option>
<option value="10">10:00</option>
<option value="10.5">10:30</option>
<option value="11">11:00</option>
<option value="11.5">11:30</option>
<option value="12">12:00</option>
<option value="12.5">12:30</option>
<option value="13">13:00</option>
<option value="13.5">13:30</option>
<option value="14">14:00</option>
<option value="14.5">14:30</option>
<option value="15">15:00</option>
<option value="15.5">15:30</option>
<option value="16">16:00</option>
<option value="16.5">16:30</option>
<option value="17" selected="selected">17:00</option>
<option value="17.5">17:30</option>
<option value="18">18:00</option>
<option value="18.5">18:30</option>
<option value="19">19:00</option>
<option value="19.5">19:30</option>
<option value="20">20:00</option>
<option value="20.5">20:30</option>
<option value="21">21:00</option>
<option value="21.5">21:30</option>
<option value="22">22:00</option>
<option value="22.5">22:30</option>
<option value="23">23:00</option>
<option value="23.5">23:30</option>
</select>
<input id="dinnerswitch" type="checkbox" value="1">
<div id="dinnerhourdiv" class="form-group">
<label class="col-sm-3 control-label">Select Which Hour You Would Like To Have Off?</label>
<div class="col-sm-2" id="showdinnerhours"></div>
</div>
Example Javascript
jQuery(document).read(function(){
jQuery('#dinnerswitch').change(function(){
if(jQuery(this).is(':checked')) {
jQuery(this).val(1);
};
if(jQuery(this).is(':checked') == false) {
jQuery(this).val(0);
};
var dinnerid = jQuery('#dinnerswitch').val();
var thestart = jQuery('#timefrom').val();
var theend = jQuery('#timeto').val();
var thetype = jQuery('#bookingtype').val();
var thei = 0;
var doi = '';
var calchours = ((theend - thestart) / thetype);
var calstart = '';
var calend = '';
var enterhours = '';
var addingnumbers = 0;
for(thei = 0; thei <= calchours; thei+= +thetype){
calstart = +thestart + +thei;
if(calstart < 12){
calend = calstart + ' AM';
} else {
calend = calstart + ' PM';
}
calend = calend.replace('.5', ':30');
enterhours += '<option value="' + addingnumbers + '">' + calend + '</option>';
addingnumbers = +addingnumbers + 1;
}
if(dinnerid == 1){
jQuery('#showdinnerhours').html('<select class="form-control" name="dinnerhour" id="dinnerhour">' + enterhours + '</select>');
jQuery('#dinnerhourdiv').removeClass('hidden');
} else {
jQuery('#showdinnerhours').html('');
jQuery('#dinnerhourdiv').addClass('hidden');
}
});
});

Your logic does exactly what you told it to do!
When selecting "1 hour bookings with 30 minute intervals", and start as 9:00 and end as 17:00 your variables have the following values:
thestart = 09
theend = 17
thetype = 1.5
therefore
calchours = 5.333333 or ((17-9)/1.5)
Your loop starts at zero, continues until calchoursand increments by 1.5. Therefore the loop only runs 4 times, giving you entries in the dynamic select of 9:00, 10:30, 12 & 13:30.
This is entirely consistent with "maths", and I came to these conclusions through the magic of "debugging". Check the console: http://jsfiddle.net/7x82d66h/

getting the value of dropdown menu's and displaying choice using JS

Once the user chooses which flavour they want, I want to be able to display a message on the webpage with the choices they have made from the drop-downs after the submit button is clicked. Here is what I have so far:
<select name="flavour1" required>
<option value="">Please select a Flavour!</option>
<option value="apple">Apple</option>
<option value="strawberry">Strawberry</option>
<option value="lemon">lemon</option>
<option value="pear">Pear</option>
<option value="cola">Cola</option>
<option value="lime">Lime</option>
</select>
<select name="flavour2" required>
<option value="">Please select a Flavour!</option>
<option value="noflavour">No More Flavours!</option>
<option value="apple">Apple</option>
<option value="strawberry">Strawberry</option>
<option value="lemon">lemon</option>
<option value="pear">Pear</option>
<option value="cola">Cola</option>
<option value="lime">Lime</option>
</select>
<input type="submit" value="Get your Flavour!!" onclick="getFlavour()">
JavaScript to attempt to display message into element with id: "postFlavour"
function getFlavour(){
var flavour1 = getElementById("flavour1").value;
var flavour2 = getElementById("flavour1").value;
document.getElementById("postFlavour").innerHTML = "Congratulations, here are your chosen flavours: "+flavour1+", "+flavour2;
}

function getFlavour(){
var sel1 = getElementById("flavour1");
var sel2 = getElementById("flavour2");
var flavour1 = sel1.options[sel1.selectedIndex];
var flavour2 = sel2.options[sel2.selectedIndex];
document.getElementById("postFlavour").innerHTML = "Congratulation, here are your chosen flavours: "+flavour1+", "+flavour2;
return false;
}

How to use option from a drop down list many times

i wonder if there's a way to use option from select tag for many drop down list. My html looks like :
<div id="backGround0"></div>
<div id="dropspot0"></div>
<p class="ziua0">LUNI<br/>
<select id="zile0">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">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>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="luniAn0">
<option value="Ianuarie">Ianuarie</option>
<option value="Februarie">Februarie</option>
<option value="Martie">Martie</option>
<option value="Aprilie">Aprilie</option>
<option value="Mai">Mai</option>
<option value="Iunie">Iunie</option>
<option value="Iulie">Iulie</option>
<option value="August">August</option>
<option value="Septembrie">Septembrie</option>
<option value="Octombrie">Octombrie</option>
<option value="Noiembrie">Noiembrie</option>
<option value="Decembrie">Decembrie</option>
</select>
</p>
And i want to add exactly the same values from above into these select tags:
<div id="backGround1"></div>
<div id="dropspot1"></div>
<p class="ziua1">MARTI<br/>
<select id="zile1">
</select>
<select id="luniAn1">
</select>
</p>
I have tried like this:
function dropDownLists(){
var zileOptions = $.map($('#zile0 option'), function(e) { return e.value; });
var luniAnOptions = $.map($('#luniAn option'), function(e) { return e.value; });
for(var i = 1; i < 7; i++){
zileToAdd = document.getElementById("zile" + i);
luniToAdd = document.getElementById("luniAn" + i);
zileToAdd.append("<option>" + zileOptions + "</option>");
luniToAdd .append("<option>" + luniAnOptions + "</option>");
}
}
Where i tried to take value of first select tag and add in another. But,i couldnt get option value,name or something else for Months...and neither
zileToAdd.append("<option>" + zileOptions + "</option>");
doesnt work :( That for shall add these two drop down lists 6 more times for select tags like id="zile" + i (for days) and id="luniAn" + i for second drop down list (months).

You can try html() function
$('#zile1').html($('#zile0').html());
$('#luniAn1').html($('#luniAn0').html());
Please check this demo

demo: http://jsfiddle.net/8LcVv/
var zile0 = $('#zile0').html();
$('#zile1').html(zile0);
var luniAn0 = $('#luniAn0').html();
$('#luniAn1').html(luniAn0);

you can also use html-defining javascript-variables:
var options = '<option value="01">01</option>' +
'<option value="02">02</option>' +
'<option value="03">03</option>';
$('#zile1').append(options);
$('#luniAn1').append(options);
something like this should work also.

you can add the select block in one file; And include them where ever needed. This link may help you.
Include same header and footer in multiple html files
The benefit of using this technique is it allows you add same code in different pages.

Cascading Combo box HTML

I am not really a web person and am having trouble creating a cascading combo box. I have my options, but when I cannot figure out how to do a JavaScript command to switch the second box depending on the first box's selection.
These are my first set of options:
<select id="searchType" onchange="selectedOption(this)">
<option value="sessions">Sessions</option>
<option value="files">Files</option>
<option value="clients">Clients</option>
</select>
Depending on what they click there I would like to show these set of options:
SESSIONS
<select id="secondOptions">
<option value="conf">Config ID</option>
<option value="length">Length</option>
<option value="date">Date</option>
</select>
FILES
<select id="secondOptions">
<option value="id">File ID</option>
<option value="length">Length</option>
<option value="sent">Sent</option>
<option value="sessionId">Session ID</option>
</select>
CLIENTS
<select id="secondOptions">
<option value="name">Client Name</option>
<option value="organization">Organization</option>
<option value="specialty">Specialty</option>
<option value="sessionId">Session ID</option>
</select>
And finally a textbox to type into to really specify the search.
Once again, I am trying to do this using JavaScript, but if there is a better way to do this let me know please.

Given the amended html mark-up:
<form action="#" method="post">
<select id="searchType">
<option value="sessions">Sessions</option>
<option value="files">Files</option>
<option value="clients">Clients</option>
</select>
<select id="sessions">
<option value="conf">Config ID</option>
<option value="length">Length</option>
<option value="date">Date</option>
</select>
<select id="files">
<option value="id">File ID</option>
<option value="length">Length</option>
<option value="sent">Sent</option>
<option value="sessionId">Session ID</option>
</select>
<select id="clients">
<option value="name">Client Name</option>
<option value="organization">Organization</option>
<option value="specialty">Specialty</option>
<option value="sessionId">Session ID</option>
</select>
<fieldset id="textAreaSearchBox">
<legend>Search:</legend>
<textarea></textarea>
</fieldset>
</form>
(Note the changed ids, wrapping the form elements in a form, the addition of a fieldset, legend and textarea in the mark-up), the following JavaScript seems to work:
var select1 = document.getElementById('searchType');
var selects = document.getElementsByTagName('select');
select1.onchange = function() {
var select2 = this.value.toLowerCase();
for (i = 0; i < selects.length; i++) {
if (selects[i].id != this.id) {
selects[i].style.display = 'none';
}
}
document.getElementById(select2).style.display = 'block';
document.getElementById('textAreaSearchBox').style.display = 'block';
};
JS Fiddle demo.

We Keep Coding

JavaScript is the programming language of the Web.

Why select options created by JS are limited or are not shown? - javascript

The problem is your for loop. for(var i=1900,j=1;i<3000,j<=31;i++,j++) this will stop when j reaches 31. What you need is two for loops one for days and one for years. I edited your fiddle here.

Related

Car Make/Model dynamic dropdown

Having issues with a javascript for loop += decimal variable [closed]

getting the value of dropdown menu's and displaying choice using JS

How to use option from a drop down list many times

Cascading Combo box HTML

Categories

Resources