To make the issue short. I have 3 dropdowns for picking a date. The date picker display the range of the days within the month if it's only 29 or 31 days. It's working fine now except that when I changed in different month the value in my days is repeating.
For example I choose February. The days that is display is 28 days.
Then I changed to March. The days displays as 31 days. The problem is they are only combining so the value in my day dropdown become many. How can I fixed this, any help?
function daysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
function onMonthChange(){
var year = document.getElementById("yeardialog").value;
var month = document.getElementById("monthdialog").value;
var endOfTheMonth = daysInMonth(month, year);
console.log(endOfTheMonth);
var select = document.getElementById('datedialog');
for (var i = 0; i < endOfTheMonth; i++) {
select.options[select.options.length] = new Option(i + 1, i);
}
}
<select id="yeardialog" name="yeardialog">
<option value="">--</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
</select>
<select id="monthdialog" onchange="onMonthChange()">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="datedialog">
<option></option>
</select>
var select = document.getElementById('datedialog');
select.innerHTML = ""; // clear the select.
for (var i = 0; i < endOfTheMonth; i++) {
select.options[select.options.length] = new Option(i + 1, i);
}
The solution is plain and simple. Delete the contents of the select before populating them.
Solution inside the snippet:
function daysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
function onMonthChange(){
var year = document.getElementById("yeardialog").value;
var month = document.getElementById("monthdialog").value;
var endOfTheMonth = daysInMonth(month, year);
console.log(endOfTheMonth);
var select = document.getElementById('datedialog');
var selectedvalue = select.querySelector('option:checked');
if (selectedvalue)
{
var store = selectedvalue.getAttribute("value");
}
select.innerHTML = "";
for (var i = 0; i < endOfTheMonth; i++) {
select.options[select.options.length] = new Option(i + 1, i);
}
var retrieved = select.querySelector("option[value='"+store+"']");
if (retrieved)
{
retrieved.setAttribute("selected", "true");
}
}
<select id="yeardialog" name="yeardialog">
<option value="">--</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
</select>
<select id="monthdialog" onchange="onMonthChange()">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="datedialog">
<option></option>
</select>
Updated question. Store the original value before deleting:
We look for the selected value using:
select.querySelector('option:checked');
Then we look if the value can be found in the new list. If so select the value. If not revert to 1. This happens when you select 31 and the month loaded only has 30 days.
I wouldn't modify the innerHTML, I prefer removing the nodes
var select = document.getElementById('datedialog');
while(select.hasChildNodes())select.removeChild(select.firstChild);// clear the select.
for (var i = 0; i < endOfTheMonth; i++) {
select.options.add(new Option(i + 1, i));
}
Try this:
function onMonthChange(){
var year = document.getElementById("yeardialog").value;
var month = document.getElementById("monthdialog").value;
var endOfTheMonth = daysInMonth(month, year);
console.log(endOfTheMonth);
var select = document.getElementById('datedialog');
select.innerHTML = '';
select.options[0] = new Option("Pick a date", 0);
for (var i = 1; i < endOfTheMonth; i++) {
select.options[select.options.length] = new Option(i + 1, i);
}
}
Related
I have a dropdown with values. I have an array array with a list of values that will match the drop down values. If the value of text option of the dropdown exists in the array, it shouldn't show in the dropdown as an option. I am stuck on the approach I should use. This is what I have so far.
HTML
Car Plates:
<select title='car/id' id='car_x0020_Plate_x002f'>
<option selected="selected" value="0">none</option>
<option value="16">233-jj2</option>
<option value="10">934-zxy</option>
<option value="90">330-nbh</option>
<option value="11">930-orj</option>
</select>
JavaScript
var hideOption = ['233-jj2', '330-nbh']
var e = document.querySelector([id^='car']);
var strUser = e.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;
for (var x=0; x<hideOption.length; x++){
if (hideOption[x] === strUser){
//remove from dropdown
}
}
I made your idea in a very simple way, if you have any question please tell me
var hideOption = ['233-jj2', '330-nbh'],
select = document.getElementById("select");
for (let i = 0; i < hideOption.length; i = i + 1) {
for (let t = 1; t < select.options.length; t = t + 1) {
if (hideOption[i] == select.options[t].textContent) {
select.options[t].remove();
}
}
}
Car Plates:
<select title='car/id' id='select'>
<option selected="selected" value="0">none</option>
<option value="16">233-jj2</option>
<option value="10">934-zxy</option>
<option value="90">330-nbh</option>
<option value="11">930-orj</option>
</select>
// remove from dropdown
use this code to remove from dropdown
e.removeChild(e.options[e.selectedIndex])
you can use this also
e.selectedOptions[0].remove()
var hideOption = ['233-jj2', '330-nbh']
var e = document.querySelector("[id^='car']");
var selTextArr = Array.from(e.options).map(option => option.text)
for (var x=0; x<selTextArr.length; x++){
if (hideOption.includes(selTextArr[x])){
e.remove(x)
}
}
Car Plates:
<select title='car/id' id='car_x0020_Plate_x002f'>
<option selected="selected" value="0">none</option>
<option value="16">233-jj2</option>
<option value="10">934-zxy</option>
<option value="90">330-nbh</option>
<option value="11">930-orj</option>
</select>
var options = document.querySelector("[id^='car']").children;
var hideOption = ['233-jj2', '330-nbh']
for (var i = 0; i < options.length; i++){
if(hideOption.indexOf(options[i].text) > -1){
options[i].remove();
}
}
I'm trying to append new value at the end of a option select box. The number should continue instead of starting from 1.
var n_standard = 1;
function removeStandard() {
var select = document.getElementById('selectBoxStandard');
for (var i = Number($("#selectBoxStandard").val()); i <= n_standard; i++){
var opt = document.createElement('option');
opt.value = i;
opt.innerHTML = i;
select.appendChild(opt);
}
}
<label for="rooms" style="color:black">No. of rooms: </label>
<select required tabindex="10" id="selectBoxStandard" name="n_rooms">
<option value="0">0</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>
This javascript code will fill the value of option based on the value of n_standard it should continue the number instead of starting from 1 again.
Program output
option
0
1
2
3
4
5
6
1
Expected output
option
0
1
2
3
4
5
6
7
8
You can query how many options the select currently has and add that as an offset:
var offset = select.find("option").length;
opt.value = i + offset;
var n_standard = 1;
function removeStandard() {
var select = $('#selectBoxStandard');
var offset = select.find("option").length;
// not clear why you would start at 5 and check 5<=1 which will always give nothing
// so for demo, always adds one item (so doesn't need the loop)
// change n_standard to add more than one at a time
//for (var i = Number(select.val()); i <= n_standard; i++) {
for (var i = 0; i < n_standard; ++i) {
var opt = document.createElement('option');
opt.value = i + offset;
opt.innerHTML = i + offset;
select.get(0).appendChild(opt);
}
}
$("#b").click(removeStandard);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="rooms" style="color:black">No. of rooms: </label>
<select required tabindex="10" id="selectBoxStandard" name="n_rooms">
<option value="0">0</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>
<button id='b'>click me</button>
Alternatively, you could set the start value to the highest value if there might be gaps.
Use select.length in your code to get the number of <option> in <select>.
https://www.w3schools.com/jsref/prop_select_length.asp
var n_standard = 1;
function removeStandard(){
var select = document.getElementById('selectBoxStandard');
for (var i = Number($("#selectBoxStandard").val()); i< n_standard; i++){
var opt = document.createElement('option');
opt.value = select.length;
opt.innerHTML = select.length;
select.appendChild(opt);
}
}
removeStandard();
It's not clear what you are trying to do. But If you are trying to increase the option through that for loop try this:
var n_standard = 9;
var select = document.getElementById('selectBoxStandard');
for (var i = Number(select.value); i <= n_standard; i++) {
var opt = document.createElement('option');
opt.value = i;
opt.innerHTML = i;
select.appendChild(opt);}
This will dynamically add options with value increased based on n_standar.
I have 3 chained select boxes using jquery and json.
Depending on first 2 values I filter third one my code actually works but the problem is when I change values of first 2 select boxes third select recieves new datas while keeping old ones.
I've tried to empty my array but it didn't work.
$(document).ready(function() {
var json = JSON.parse(jsonString);
var makesArray = [];
var selectedyear;
var selectedcourse;
var $yearDropDown = $("#DropDown_Year");
var $course_type = $("#course_type");
$yearDropDown.change(function() {
selectedyear = this.value;
//filter based on selected year.
});
$course_type.change(function(){
selectedcourse = this.value;
makesArray = jQuery.grep(json, function(course, i) {
return course.course_type == selectedcourse && course.year_code == selectedyear;
})
var selectBox = document.getElementById('DropDown_Make');
for(var i = 0, l = makesArray.length; i < l; i++){
var option = makesArray[i];
selectBox.options.add( new Option(option.course_code, option.course_code, option.course_code) );
}
makesArray= []; //makesArray.empty();
});
});
<div id="DrpDwn">
Year:
<select id="DropDown_Year">
<option>Yıl</option>
<option value="15">2015-2016</option>
<option value="16">2016-2017</option>
</select>
<select class="form-control" id="course_type" name="course_type" required>
<option value="" selected> Choose</option>
<option value="Yos">YÖS</option>
<option value="SatMatGeo">SAT (MAT)</option>
<option value="SatCriRea">SAT (ENG)</option>
<option value="TomerABC">TÖMER (ABC)</option>
<option value="TomerAB">TÖMER (AB)</option>
<option value="TomerBC">TÖMER (BC)</option>
<option value="TomerA1A2">TÖMER (A)</option>
<option value="TomerB1B2">TÖMER (B)</option>
<option value="TomerC1C2">TÖMER (C)</option>
</select>
Make:
<select id="DropDown_Make">
<option>None</option>
</select>
</div>
and this is JSFIDDLE
https://jsfiddle.net/rw7cb8c5/25/
Make DropDown_Make empty using selectBox.innerHTML = "" in $course_type.change() like following.
$course_type.change(function () {
selectedcourse = this.value;
makesArray = jQuery.grep(json, function (course, i) {
return course.course_type == selectedcourse && course.year_code == selectedyear;
})
var selectBox = document.getElementById('DropDown_Make');
selectBox.innerHTML = ""; //added this line
for (var i = 0, l = makesArray.length; i < l; i++) {
var option = makesArray[i];
selectBox.options.add(new Option(option.course_code, option.course_code, option.course_code));
}
makesArray.empty();
});
UPDATED FIDDLE
DOM:
<select name="statusId">
<option value="">Choose a status</option>
<option value="12856801">Not a Fit</option>
<option value="12882961">Contacted </option>
<option value="13071711">No Contact Info</option>
I found this code and tried it:
var textToFind = 'Contacted';
var dd = document.getElementsByName('statusId')[0];
for (var i = 0; i < dd.options.length; i++) {
if (dd.options[i].text === textToFind) {
dd.selectIndex = i;
break;
}
}
It's not setting the value, it's just returning 2
What am I doing wrong?
selectedIndex not selectIndex
I can't read.
HTML code:
<tr>
<td><label for="expiry_day">Expiry date(MM/YYYY):<span id="imp">*</span></label></td>
<td>
<select id="expiry_month" tabindex="4">
<optgroup label="Month">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</optgroup>
</select>
<select id="expiry_year" tabindex="5">
<optgroup label="Year">
<script>generate_year();</script>
</optgroup>
</select>
</td>
</tr>
JavaScript code:
function generate_year() /*For generate cc year*/
{
for (var i = 2014; i <= 2104; i++)
{
document.write ("<option value='" + i + "'>" + i + "</option>");
}
}
function val_cc () {
var expiry_month = document.getElementById("expiry_month").value;
var expiry_year = document.getElementById("expiry_year").value;
var today = new Date();
var expiry_date = today.setFullYear(expiry_year, expiry_month);
if (today.getTime() > expiry_date.getTime())
{
alert ("\u2022Expiry month and year cannot be blank/Expiry month and year is before today month and year.");
return false;
}
}
These codes are basically used to validate the expiry date for credit card.For example,if today is March 2014 and the user chooses February 2014,I want the form to return false.However,if he chooses April 2014,I want the form to return true and proceed to the next page.If there are mistakes,can you please point them out and do a simple explanation?
You should update values from select-boxes every time user changes values, please see this fiddle http://jsfiddle.net/shershen08/wcFC4/
function runMyCheck(){
//update value every run
var expiry_month = document.getElementById("expiry_month").value;
var expiry_year = document.getElementById("expiry_year").value;
var today = new Date();
var selDate = new Date();
if (today.getTime() > selDate.setFullYear(expiry_year, expiry_month)){
//too late
alert ("\u2022Expiry month and year cannot be blank/Expiry month and year is before today month and year.");
return false;
} else {
//do good stuff...
}
}
Try this:
var today = new Date();
var expDate = new Date($("#cart-expyear").val(),($("#cart-expmonth").val()-1)); // JS Date Month is 0-11 not 1-12 replace parameters with year and month
if(today.getTime() > expDate.getTime()) {
console.log("Your Card is expired. Please check expiry date.");
}
Try this:
function generate_year() /*For generate cc year*/
{
for (var i = 2014; i <= 2104; i++)
{
var x = document.getElementById("expiry_year");
var option = document.createElement("option");
option.text = i;
option.value=i
x.add(option);
}
}
var expiry_month = document.getElementById("expiry_month").value;
alert(expiry_month);
var expiry_year = document.getElementById("expiry_year").value;
var today = new Date();
var expiry_date = today.setFullYear(expiry_year, expiry_month);
var from=new Date();
if (today.getTime() >from.setFullYear(expiry_year, expiry_month) )
{
alert ("\u2022Expiry month and year cannot be blank/Expiry month and year is before today month and year.");
//return false;
}