How to hide single div based on selected option from dropdown

How to hide single div based on selected option from dropdown - javascript

I have to make sure the second dropdown menu only starts showing when an option ("Tijd" or "Woorden") is selected in the first one. When no option is selected afterwards, the second dropdown has to hide again.
HTML
<div class="dropdown">
<p>Spelmodus:</p>
<select id="spelmodus" name="spelmodus" onchange="changeSpelmodus(this.value);">
<option></option>
</select>
</div>
<div id="optieDiv">
<p id="tijdWoorden"></p>
<select id="opties" name="opties" onchange="changeOptie(this.value);">
</select>
</div>
JavaScript
var spelmodusOpties = {
"Tijd": [{"Optie": "1 minuut"}, {"Optie": "2 minuten"}, {"Optie": "5 minuten"}],
"Woorden": [{"Optie": "50 woorden"}, {"Optie": "100 woorden"}, {"Optie": "150 woorden"}],
};
function PrepopulateSpelmodus() {
var spelmodusSelect = document.getElementById('spelmodus');
var i = 1;
for (var spelmodus in spelmodusOpties) {
spelmodusSelect.options[i++] = new Option(spelmodus)
}
}
function changeSpelmodus(productNameID) {
var optieSelect = document.getElementById('opties');
optieSelect.innerHTML = '<option></option>'; // Remove previous options
var versions = spelmodusOpties[productNameID];
for (var i = 0; i < versions.length; i++) {
optieSelect.appendChild(new Option(versions[i].Optie));
}
var selectie = document.getElementById('spelmodus').value;
document.getElementById('tijdWoorden').innerHTML = selectie
}
function changeOptie() {
var productNameID = document.getElementById('spelmodus').value;
var versions = spelmodusOpties[productNameID];
for (var i = 0; i < versions.length; i++) {
}
}
PrepopulateSpelmodus();

You just need to validate and hide on change of select
if(!productNameID){
document.getElementById('optieDiv').style.display = "none"
return;
}else{
document.getElementById('optieDiv').style.display = ""
}
var spelmodusOpties = {
"Tijd": [{"Optie": "1 minuut"}, {"Optie": "2 minuten"}, {"Optie": "5 minuten"}],
"Woorden": [{"Optie": "50 woorden"}, {"Optie": "100 woorden"}, {"Optie": "150 woorden"}],
};
function PrepopulateSpelmodus() {
var spelmodusSelect = document.getElementById('spelmodus');
var i = 1;
for (var spelmodus in spelmodusOpties) {
spelmodusSelect.options[i++] = new Option(spelmodus)
}
}
function changeSpelmodus(productNameID) {
if(!productNameID){
document.getElementById('optieDiv').style.display = "none"
return;
}else{
document.getElementById('optieDiv').style.display = ""
}
var optieSelect = document.getElementById('opties');
optieSelect.innerHTML = '<option></option>'; // Remove previous options
var versions = spelmodusOpties[productNameID];
for (var i = 0; i < versions.length; i++) {
optieSelect.appendChild(new Option(versions[i].Optie));
}
var selectie = document.getElementById('spelmodus').value;
document.getElementById('tijdWoorden').innerHTML = selectie
}
function changeOptie() {
var productNameID = document.getElementById('spelmodus').value;
var versions = spelmodusOpties[productNameID];
for (var i = 0; i < versions.length; i++) {
}
}
PrepopulateSpelmodus();
<div class="dropdown">
<p>Spelmodus:</p>
<select id="spelmodus" name="spelmodus" onchange="changeSpelmodus(this.value);">
<option></option>
</select>
</div>
<div id="optieDiv" style="display: none">
<p id="tijdWoorden"></p>
<select id="opties" name="opties" onchange="changeOptie(this.value);">
</select>
</div>

const optieDivEl = document.querySelector('#optieDiv');
function toggleOptieDiv(event) {
// Check if the event.target (select) is one of the specified values
if (['tijd', 'woorden'].includes(event.target.value)) {
// Do no render `div.optieDiv`
optieDivEl.style.display = 'none';
} else {
// Render `div.optieDiv`
optieDivEl.style.display = 'block';
}
}
document.onload = toggleOptieDiv;
document.querySelector('#spelmodus').addEventListener('change', toggleOptieDiv);
<div class="dropdown">
<p>Spelmodus:</p>
<select id="spelmodus" name="spelmodus">
<option value="">--Please choose an option--</option>
<option value="tijd">Tijd</option>
<option value="woorden">Woorden</option>
<option value="other">Other</option>
</select>
</div>
<div id="optieDiv">
<p id="tijdWoorden"></p>
<select id="opties" name="opties" onchange="changeOptie(this.value);">
</select>
</div>

Related

Drop Down Search Box

I have this code trying to create a drop-down search box for the Shopify store Which can find available inks and toner available in store and show the result on the new page!
so right now the drop-down menu not Working Properly ( not going to the next section!)
How can I fix this?
the website is www.DoorStepInk.com
<div class="printer-finder-widget embedded" data-family-label="Select a Printer Family" data-model-label="Select a Printer Model" data-activated="true">
<p class="as-h2">Ink & Toner Finder</p>
<p class="as-h3">Save up to 80% on Printer Supplies</p>
<div class="select-house has-options">
<label for="select_brand" class="fancy-label"><span>Select a <b>Printer Brand</b></span></label>
<select id="select_brand" class="select-brand">
<option value="">Select a Printer Brand</option>
<option value="7">Brother</option>
<option value="9">Canon</option>
<option value="10">Dell</option>
<option value="11">Epson</option>
<option value="13">HP</option>
<option value="20">Lexmark</option>
<option value="28">Pitney Bowes</option>
<option value="37">Xerox</option>
<option value="17706">More Brands</option>
</select>
</div>
<div class="select-house">
<label for="select_family" class="fancy-label"><span>Select a <b>Printer Family</b></span></label>
<select id="select_family" class="select-family" disabled="">
<option value="">Select a Printer Family</option>
</select>
</div>
<div class="select-house">
<label for="select_model" class="fancy-label"><span>Select a <b>Printer Model</b></span></label>
<select id="select_model" class="select-model" disabled="">
<option value="">Select a Printer Model</option>
</select>
</div>
<script>
require(['mage/storage'], function(storage) {
'use strict';
var finders = Array.from(document.querySelectorAll('.printer-finder-widget'));
finders.forEach(function(finder) {
if (finder.getAttribute('data-activated')) {
return false;
}
var brandSelect = finder.querySelector('.select-brand');
var familySelect = finder.querySelector('.select-family');
var modelSelect = finder.querySelector('.select-model');
var selectedBrand, selectedFamily, selectedModel;
function resetFamily() {
var fancyLabel = familySelect.parentElement.querySelector('.fancy-label');
if (fancyLabel) {
if (fancyLabel.getAttribute('data-html')) {
fancyLabel.querySelector('span').innerHTML = fancyLabel.getAttribute('data-html');
}
}
familySelect.innerHTML = "<option value=''>" + finder.getAttribute('data-family-label') + "</option>";
familySelect.parentElement.classList.remove('has-options');
familySelect.parentElement.classList.remove('loading');
familySelect.disabled = true;
}
function resetModel() {
var fancyLabel = modelSelect.parentElement.querySelector('.fancy-label');
if (fancyLabel) {
if (fancyLabel.getAttribute('data-html')) {
fancyLabel.querySelector('span').innerHTML = fancyLabel.getAttribute('data-html');
}
}
modelSelect.innerHTML = "<option value=''>" + finder.getAttribute('data-model-label') + "</option>";
modelSelect.parentElement.classList.remove('has-options');
modelSelect.parentElement.classList.remove('loading');
modelSelect.disabled = true;
}
function setLoading(select, complete) {
if (complete) {
select.parentElement.classList.remove('loading');
select.parentElement.classList.add('has-options');
select.disabled = false;
} else {
select.parentElement.classList.add('loading');
}
}
brandSelect.addEventListener('change', function() {
familySelect.classList.remove('has-options');
var selectedCategory = this.querySelector('option:checked').value;
var selectedCategoryLabel = this.querySelector('option:checked').innerHTML;
var fancyLabel = brandSelect.parentElement.querySelector('.fancy-label');
if (fancyLabel) {
if (!fancyLabel.getAttribute('data-html')) {
fancyLabel.setAttribute('data-html', fancyLabel.innerHTML);
}
fancyLabel.querySelector('span').innerHTML = selectedCategoryLabel;
}
if (selectedCategory) {
selectedBrand = selectedCategoryLabel;
resetFamily();
resetModel();
setLoading(familySelect);
storage.get(
'/rest/V1/printerfinder/families/' + selectedCategory
).done(function(data) {
var families = JSON.parse(data), option;
for (var i = 0; i < families.length; i++) {
option = document.createElement('option');
option.innerHTML = families[i].name;
option.value = families[i].id;
familySelect.appendChild(option);
}
setLoading(familySelect, true);
});
}
});
familySelect.addEventListener('change', function() {
modelSelect.parentElement.classList.remove('has-options');
var selectedCategory = this.querySelector('option:checked').value;
var selectedCategoryLabel = this.querySelector('option:checked').innerHTML;
var fancyLabel = familySelect.parentElement.querySelector('.fancy-label');
if (fancyLabel) {
if (!fancyLabel.getAttribute('data-html')) {
fancyLabel.setAttribute('data-html', fancyLabel.innerHTML);
}
fancyLabel.querySelector('span').innerHTML = selectedCategoryLabel;
}
if (selectedCategory) {
selectedFamily = selectedCategoryLabel;
resetModel();
setLoading(modelSelect);
storage.get(
'/rest/V1/printerfinder/models/' + selectedCategory
).done(function(data) {
var models = JSON.parse(data), option;
modelSelect.parentElement.classList.remove('loading');
modelSelect.innerHTML = "<option value=''>" + finder.getAttribute('data-model-label') + "</option>";
for (var i = 0; i < models.length; i++) {
option = document.createElement('option');
option.innerHTML = models[i].name;
option.setAttribute('data-url', models[i].url);
modelSelect.appendChild(option);
}
setLoading(modelSelect, true);
});
}
});
modelSelect.addEventListener('change', function() {
var selectedCategory = this.querySelector('option:checked');
var selectedCategoryLabel = this.querySelector('option:checked').innerHTML;
var fancyLabel = modelSelect.parentElement.querySelector('.fancy-label');
if (fancyLabel) {
if (!fancyLabel.getAttribute('data-html')) {
fancyLabel.setAttribute('data-html', fancyLabel.innerHTML);
}
fancyLabel.querySelector('span').innerHTML = selectedCategoryLabel;
}
if (selectedCategory.getAttribute('data-url')) {
selectedModel = selectedCategoryLabel;
try {
window.sessionStorage.setItem("lastFinderConfig", JSON.stringify({
brand: selectedBrand,
family: selectedFamily,
model: selectedModel
}));
} catch (e) {
// private browsing
}
window.location = selectedCategory.getAttribute('data-url');
}
});
finder.setAttribute('data-activated', true);
});
});
</script>
</div>

disabling options in a dropdown based on another dropdown

I am trying to disable/remove options in a dropdown, based on the selection of other dropdown options.
But the dropdown/selector we have to choose from, has a sub-dropdown list and both main and sub dropdowns are
sharing the same classes and ids but since both are wrapped in different divs with different ids, I have been
trying to access the second selector but couldn't .
Below is the js code that I used for this;
<script type="text/javascript">
document.getElementById("lvl1").querySelector("select").onchange = function()
{
if(this.value=="8"){
var bikeSizes = document.getElementById("pa_size[]");
for ( var i = 1; i <8; i++) {
bikeSizes.options[i].removeAttribute("disabled", "disabled");
}
for ( var i = 8; i < 12; i++) {
bikeSizes.options[i].setAttribute("disabled", "disabled");
}
} else {
var bikeSizes = document.getElementById("pa_size[]");
for ( var i = 1; i < 8; i++) {
bikeSizes.options[i].setAttribute("disabled", "disabled");
}
for ( var i = 8; i < 12; i++) {
bikeSizes.options[i].removeAttribute("disabled", "disabled");
}
}
return false;
};
</script>
The html code of the selector/dropdowns are;
— Select —
Camping
Road Sports
Snow Sports
Water Sports
<div id="lvl1" level="1" style="">
<select data-required="yes" data-type="select" name="product_cat" id="product_cat" class="cat-ajax product_cat wpuf_product_cat_">
<option value="-1">— Select —</option>
<option class="level-0" value="8">Bikes</option>
</select>
<span data-taxonomy="{"required":"yes","name":"product_cat","exclude_type":"child_of","exclude":"camping,road-sports,water-sports","orderby":"name","order":"ASC"}"></span>
</div>

I fixed the quote then put it in an onload function. Also, there is no second argument on a removeAttribute. This worked for me.
<script>
window.onload = function () {
document.getElementById("product_cat").onchange = function () {
if (this.value == "8") {
var bikeSizes = document.getElementById("pa_size[]");
for (var i = 1; i < 8; i++) {
bikeSizes.options[i].removeAttribute("disabled");
}
for (var i = 8; i < 12; i++) {
bikeSizes.options[i].setAttribute("disabled", "disabled");
}
} else {
var bikeSizes = document.getElementById("pa_size[]");
for (var i = 1; i < 8; i++) {
bikeSizes.options[i].setAttribute("disabled", "disabled");
}
for (var i = 8; i < 12; i++) {
bikeSizes.options[i].removeAttribute("disabled");
}
}
return false;
};
}
</script>
<!-- my test html -->
<div id="lvl1" level="1" style="">
<select data-required="yes" data-type="select" name="product_cat" id="product_cat" class="cat-ajax product_cat wpuf_product_cat_">
<option value="-1">— Select —</option>
<option class="level-0" value="8">Bikes</option>
</select>
<span data-taxonomy="{"required":"yes","name":"product_cat","exclude_type":"child_of","exclude":"camping,road-sports,water-sports","orderby":"name","order":"ASC"}"></span>
<select id="pa_size[]">
<option value="-1">--Select--</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>
</select>
</div>

Based on what I saw on your website, here is an alternative solution:
<script>
var group1 = [ { value:"33", text:"Small Unisex"},
{ value:"34", text:"Large Unisex"},
{ value:"35", text:"XL Unisex"},
{ value:"36", text:"Small Womens"},
{ value:"37", text:"Medium Womens"},
{ value:"38", text:"Large Womens"},
{ value:"39", text:"XL Womens"}];
var group2 = [{value:"40", text:"Medium"},
{value:"41", text:"Small"},
{ value:"43", text:"XL"},
{ value:"42", text:"Large"}];
window.onload = function() {
document.getElementById("product_cat").onchange = function () {
var bikeSizes = document.getElementById("pa_size[]");
bikeSizes.innerHTML = "";
bikeSizes.appendChild(new Option("--Select--", "-1"));
bikeSizes.disabled = false;
if (this.value == "-1") {
bikeSizes.disabled = true;
}
else if (this.value == "8") {
for (var i = 0; i < group1.length; ++i){
var opt = new Option(group1[i].text, group1[i].value);
bikeSizes.appendChild(opt);
}
} else {
for (var i = 0; i < group2.length; ++i) {
var opt = new Option(group2[i].text, group2[i].value);
bikeSizes.appendChild(opt);
}
}
return false;
};
}
</script>

so is this closer to what you need? This is 3 select boxes where you can only see the second one after the first one has a valid selection. Then you can only see the third one when the second one has a valid choice.
The options available is dependent on its master select box.
you can see it work here http://jsbin.com/nijahoh/edit?html,js,output
<script>
var fakeData = {
group1: [{ value: "group3", text: "3" }, { value: "group4", text: "4" }],
group2: [{ value: "group5", text: "5" }, { value: "group6", text: "6" }],
group3: [{ value: "group7", text: "7" }, { value: "group8", text: "8" }],
group4: [{ value: "group9", text: "9" }, { value: "group10", text: "10" }]
};
$(document).ready(function(){
// first select box change handler
$("#product_cat").on("change", function () {
var val = this.value;
$("#d").val("-1");
setUpSel($("#d"), val);
$("#d").trigger("change");
$("#d").css("display", val=="-1"?"none":"");
});
$("#d").on("change", function () {
var val = this.value;
$("#c").val("-1");
setUpSel($("#c"), val);
$("#c").trigger("change");
$("#c").css("display", val == "-1" ? "none" : "");
});
});
function setUpSel($sel, group) {
$sel.html("<option value='-1'>--Select--</option>");
var selData = fakeData[group];
$.each(selData, function (i, opt) {
$sel.append(new Option(opt.text, opt.value));
});
}
</script>

disabled and selected is not working in customize select option menu (Javascript)

I have customized select option menu by JavaScript but there is a problem, this code is not working when option tag is disabled or selected as true.
I want this solution by JavaScript.
<form class="wrapper" action="index.html">
<ul>
<li>
<div class="magneto-combobox">
<select class="combo-box" data-element="combobox">
<option value="apple" disabled>apple</option>
<option value="mango">mango<option>
<option value="banana" >banana<option>
</select>
</div>
</li>
<lil>
<input type="submit" value="submit"/>
</lil>
</ul>
</form>
<script>
var select = document.getElementsByTagName('select');
var customselect = [];
var menu = [];
var items = [];
for(var i = 0 ; i < select.length ; i++) {
if(select[i].getAttribute("data-element") == "combobox") {
option = select[i].getElementsByTagName('option');
menu[i] = document.createElement('ul');
customselect[i] = document.createElement('div');
customselect[i].className = select[i].className;
select[i].parentNode.appendChild(customselect[i]);
select[i].parentNode.appendChild(menu[i]);
for(var j = 0 ; j < option.length; j++) {
items[j] = document.createElement('li');
menu[i].appendChild(items[j]);
menu[i].childNodes[j].innerText = option[j].value;
menu[i].previousSibling.innerText = option[0].value;
option[j].selected = true;
if(!select[i].getAttribute('disabled')) {
items[j].onmousedown = itemSelected;
}
}
}
}
function itemSelected() {
var prevsibling = this.parentNode.previousSibling;
var firstchild = this.parentNode.parentNode.firstChild;
var option = firstchild.getElementsByTagName('option');
prevsibling.innerText = this.innerText;
firstchild.value = prevsibling.innerText;
document.getElementById('demo').innerText = firstchild.value;
}
</script>

Your <option> tags are not correctly closed with a matching </option> tag.
You code should be:
<option value="apple" disabled>apple</option>
<option value="mango">mango</option>
<option value="banana">banana</option>

How to find Currently Selected value from this Custom HTML form Tag?

I have an element which is text box but its value is populated from another hidden select element.
<input type="text" id="autocompleteu_17605833" style="box-shadow: none; width: 119px;" class="mobileLookupInput ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<select id="u_17605833" name="u_17605833" style="visibility: hidden">
<option value="127468">Virginia</option>
<option value="127469">Washington</option>
<option value="127470">West Virginia</option>
<option value="127471">Wisconsin</option>
<option value="127472">Wyoming</option>
</select>
var mySelObju_17605833 = document.getElementById("u_17605833");
$(function () {
var availableTagsu_17605833 = new Array();
for (var i = 0; i < mySelObju_17605833.options.length; i++) {
if (mySelObju_17605833.options[i].text != 'Other') {
availableTagsu_17605833[i] = mySelObju_17605833.options[i].text;
}
}
$("#autocompleteu_17605833").width($(mySelObju_17605833).width() + 5);
availableTagsu_17605833 = $.map(availableTagsu_17605833, function (v) {
return v === "" ? null : v;
});
$("#autocompleteu_17605833").autocomplete({
minLength: 0,
source: function (request, response) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
var a = $.grep(availableTagsu_17605833, function (item, index) {
var items = item.split(" ");
for (i = 0; i < items.length; i++) {
if (matcher.test(items[i])) return matcher.test(items[i]);
}
return matcher.test(item);
});
response(a);
},
close: function (event, ui) {
for (var i = 0, sL = mySelObju_17605833.length; i < sL; i++) {
if (mySelObju_17605833.options[i].text.toLowerCase() == $("#autocompleteu_17605833").val().toLowerCase()) {
mySelObju_17605833.selectedIndex = i;
$("#errorTDu_17605833").html("");
break;
}
mySelObju_17605833.selectedIndex = 0;
$("#errorTDu_17605833").html("Error: Invalid Input");
}
$("#autocompleteu_17605833").trigger("onchange")
}
});
});
$("#autocompleteArrowu_17605833").click(function () {
$("#autocompleteu_17605833").autocomplete("search");
$("#autocompleteu_17605833").focus();
});
$("#autocompleteu_17605833").focusout(function () {
for (var i = 0, sL = mySelObju_17605833.length; i < sL; i++) {
if (mySelObju_17605833.options[i].text.toLowerCase() == $("#autocompleteu_17605833").val().toLowerCase()) {
mySelObju_17605833.selectedIndex = i;
$("#errorTDu_17605833").html("");
break;
}
mySelObju_17605833.selectedIndex = 0;
$("#errorTDu_17605833").html("Error: Invalid Input");
}
$("#autocompleteu_17605833").trigger("onchange")
//$(this).autocomplete("close");
});
I want to find value selected in the hidden select box!
I tried to do the following
$("#autocompleteu_17605833").on("click", function (event) {
$((this.id).substring((this.id).indexOf("_") - 1)).attr("onchange", function (event) {
var selece = this.value;
alert(selece);
});
});
$("#autocompleteu_17605833").next().on("click", function (event) {
var selectedValue = document.getElementById((this.id).substring((this.id).indexOf("_") - 1)).value;
alert("Click on Arrow" + selectedValue);
});
$("#autocompleteu_17605833").on("change", function (event) {
var selectedValue = document.getElementById((this.id).substring((this.id).indexOf("_") - 1)).value;
alert("Changing the value" + selectedValue);
});
what I'm getting is older value where as I need the current assigned value.
How to achieve this??

WORKING DEMO
If am not wrong you want the selected value for this you can use select method
select:function(event,ui) {
alert("You have selected "+ui.item.label);
alert("You have selected "+ui.item.value);
}

This is a simple piece of code that will work as you required.
function result(){
document.getElementById("result").innerHTML= document.getElementById("u_17605833").value;
}
<html>
<head>
</head>
<body>
<div>
<select id="u_17605833" name="u_17605833" >
<option value="127468">Virginia</option>
<option value="127469">Washington</option>
<option value="127470">West Virginia</option>
<option value="127471">Wisconsin</option>
<option value="127472">Wyoming</option>
</select>
<input type="button" value="Show the result" onclick="result()"/>
</div>
<div id="result"></div>
</body>
</html>

how to java-script populate 2 select on selecting one?

Hi there i m new here in php so i need a help guys.
I have one input and 2 select option here i want ---- if input is empty than both select are also be empty if input have some value than first select options value should be 'open' and respectively second select value should be 'form distributed' like this, here the both select are working fine but not following by input field any help will be gratfull thank you
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function configureDropDownLists(ddl1,ddl2) {
var Open = new Array('Form Distributed');
var Completed = new Array('Ready for billing', 'Completed');
var Pending = new Array('With CS', 'With O&M (Estimate)', 'With Delegate','With Executive Engineer','With Consumer (Payment)','With O&M (Connection)');
var Rejected = new Array('Rejected: By CS', 'Rejected: By O&M', 'Rejected: By Delegate','Rejected: By EE','Rejected: Demand Expired','Rejected: By O&M');
switch (ddl1.value) {
case 'Open':
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < Open.length; i++) {
createOption(document.getElementById(ddl2), Open[i], Open[i]);
}
break;
case 'Completed':
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < Completed.length; i++) {
createOption(document.getElementById(ddl2), Completed[i], Completed[i]);
}
break;
case 'Pending':
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < Pending.length; i++) {
createOption(document.getElementById(ddl2), Pending[i], Pending[i]);
}
break;
case 'Rejected':
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < Rejected.length; i++) {
createOption(document.getElementById(ddl2), Rejected[i], Rejected[i]);
}
break;
default:
document.getElementById(ddl2).options.length = 0;
break;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
</script>
</head>
<input type="text" name="date" id="datepicker">
<select id="ddl" onChange="configureDropDownLists(this,'ddl2')">
<option value="0" ></option>
<option value="Open">Open</option>
<option value="Completed">Completed</option>
<option value="Pending">Pending</option>
<option value="Rejected">Rejected</option>
</select>
<select id="ddl2">
</select>
</body>
</html>

$(document).ready(function(){
changeInput();
$("#datepicker").change(function(){
changeInput();
});
});
var optios = ['Open','Completed','Pending','Rejected'];
function changeInput(){
var input = $("#datepicker").val();
var ddl = document.getElementById("ddl");
ddl.options.length = 0;
document.getElementById("ddl2").options.length = 0;
if(input==""){
}else{
$.each(optios,function(){
var opt = document.createElement('option');
opt.value = this;
opt.text = this;
ddl.options.add(opt);
});
$("#ddl").val("Open");
configureDropDownLists(ddl,'ddl2');
}
}

Develop Reference

JavaScript is the programming language of the Web.

How to hide single div based on selected option from dropdown - javascript

Related

Drop Down Search Box

disabling options in a dropdown based on another dropdown

disabled and selected is not working in customize select option menu (Javascript)

How to find Currently Selected value from this Custom HTML form Tag?

how to java-script populate 2 select on selecting one?

Categories

Resources