We Keep Coding

Cascading Dropdown with redirect url | three dropdown display as text with link

function myFunction(){
if(document.getElementById("countySel").value == "Instancja z własnym szablonem (darmowa instalacja)"){
location.href = "https://test.com/";
}else if(document.getElementById("citySel").value == "Gonzales"){
location.href = "https://en.wikipedia.org/wiki/Gonzales,_California";
}
}
var stateObject = {
"WooCommerce": {
"Monterey": ["Salinas", "Gonzales"],
"Alameda": ["Berkeley"]
},
"OpenCart": {
"Instancja z własnym szablonem (darmowa instalacja)": ["Roseburg", "Winston"],
"Instancja2 z własnym szablonem (darmowa instalacja)": ["Roseburg", "Winston"],
},
"PrestaShop": {
"Douglas": ["Roseburg", "Winston"],
},
"Magento": {
"Douglas": ["Roseburg", "Winston"],
},
"WordPress": {
"Douglas": ["Roseburg", "Winston"],
},
"Drupal": {
"Douglas": ["Roseburg", "Winston"],
},
"Joomla": {
"Douglas": ["Roseburg", "Winston"],
},
"Page Kit": {
"Douglas": ["Roseburg", "Winston"],
},
"WordPress Blog": {
"Douglas": ["Roseburg", "Winston"],
}
}
window.onload = function () {
var stateSel = document.getElementById("stateSel"),
countySel = document.getElementById("countySel"),
citySel = document.getElementById("citySel");
for (var state in stateObject) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
stateSel.onchange = function () {
countySel.length = 1; // remove all options bar first
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) {
countySel.options[0].text = "Please select state first"
citySel.options[0].text = "Please select county first"
return; // done
}
countySel.options[0].text = "Please select county"
for (var county in stateObject[this.value]) {
countySel.options[countySel.options.length] = new Option(county, county);
}
if (countySel.options.length==2) {
countySel.selectedIndex=1;
countySel.onchange();
}
}
stateSel.onchange(); // reset in case page is reloaded
countySel.onchange = function () {
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) {
citySel.options[0].text = "Please select county first"
return; // done
}
citySel.options[0].text = "Please select city"
var cities = stateObject[stateSel.value][this.value];
for (var i = 0; i < cities.length; i++) {
citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
}
if (citySel.options.length==2) {
citySel.selectedIndex=1;
citySel.onchange();
}
}
}
</script>
<select name="optone" id="stateSel" size="1" >
<option value="" selected="selected">Select instance</option>
</select>
<br>
<br>
<select name="opttwo" id="countySel" size="1">
<option value="" selected="selected">Please select instance first</option>
</select>
<br>
<br>
<select name="three" id="citySel" size="1" value="">
<option value="" selected="selected">Please select type instance first</option>
</select>
<button onclick="myFunction()">search</button>
This code displayed 3 dropdowns with values depending on selected option. In the third option, I would like to display the text assigned to the selected options instead of the dropdown as current.
I try change code:
<select name="three" id="citySel" size="1" value="">
<option value="" selected="selected">Please select type instance first</option>
</select>
to example with <div but in this case no working and code no display text. Can anyone help me to check this issue? Thanks for everyone.

How to delete options in a dropdown list with javascript?

I have a dynamic dropdown list made of a parent-dropdown and a child-dropdown. I have a script that disables options in a child-dropdown when an option in the parent-dropdown is selected.
Instead of disabling it, I would like to completely remove the options in the child-dropdown so they won't be available.
"use strict";
window.onload = function() {
document.getElementById('category_select').addEventListener("change", function() {
function parent_() {
let i = document.getElementById('category_select');
let j = i.options[i.selectedIndex].value;
return j;
}
function child_() {
let k = document.getElementById('type_select');
for (let i = 0; i < k.options.length; ++i) {
if (k.options[i].value === parent_()) {
k.options[i].disabled = false;
} else if (k.options[i].value !== parent_()) {
k.options[i].disabled = true; //options get disabled and I would like to delete them ...
}
}
}
child_()
});
};
<select id="category_select">
<option value="">Please select</option>
<option value="1">Electronics</option>
<option value="2">Appliances</option>
</select>
<select id="type_select">
<option value="" disabled="">Please select</option>
<option value="1">Phones</option>
<option value="1">Tablets</option>
<option value="2" disabled="">Couch</option>
<option value="2" disabled="">Refrigerator</option>
<option value="2" disabled="">Vacuum</option>
</select>
Basically, when the option with the value of 1 is selected in category_select, all options in type_select with a value of 2 are disabled. I would like to delete them.
What is a simple and elegant way of doing this?
EDIT
Looks like the best solution for doing this can be found there http://jsfiddle.net/Lcjp2xav/1/ and has been provided by #Jagjeet Singh

You can do this by using k.options[i].style.display, if you want to completely remove then option then use k.options[i].remove()
function parent_() {
let i = document.getElementById('category_select');
let j = i.options[i.selectedIndex].value;
return j;
}
function child_() {
let k = document.getElementById('type_select');
for (let i = 0; i < k.options.length; ++i) {
if (k.options[i].value === parent_()) {
k.options[i].style.display = 'block';
k.options[i].disabled = false;
} else if (k.options[i].value !== parent_()) {
k.options[i].style.display = 'none';
k.options[i].disabled = true;
}
}
}
document.getElementById('category_select').addEventListener("change", function () {
child_();
});
child_();
<select id="category_select">
<option value="">Please select</option>
<option value="1">Electronics</option>
<option value="2">Appliances</option>
</select>
<select id="type_select">
<option value="">Please select</option>
<option value="1">Phones</option>
<option value="1">Tablets</option>
<option value="2">Couch</option>
<option value="2">Refrigerator</option>
<option value="2">Vacuum</option>
</select>

If you want to be able to re-display them later, you can remove them by setting their CSS to display: none, and display them again with removeProperty('display').
You can also feel free to move child_ and parent outside of the listener, to reduce unnecessary nesting:
function parent_() {
return document.getElementById('category_select').value;
}
function child_() {
let k = document.getElementById('type_select');
for (let i = 0; i < k.options.length; ++i) {
if (k.options[i].value === parent_()) {
k.options[i].style.removeProperty('display');
} else if (k.options[i].value !== parent_()) {
k.options[i].style.display = 'none';
}
}
k.selectedIndex = 0;
}
document.getElementById('category_select').addEventListener("change", child_);
<select id="category_select">
<option value="">Please select</option>
<option value="1">Electronics</option>
<option value="2">Appliances</option>
</select>
<select id="type_select">
<option value="" disabled="">Please select</option>
<option value="1">Phones</option>
<option value="1">Tablets</option>
<option value="2">Couch</option>
<option value="2">Refrigerator</option>
<option value="2">Vacuum</option>
</select>

using <optgroup> will be easier to solve the problem.
removing the child will not append back to the select box; so we are hiding the selected item from child select box at a time.
here is the pseudo code
const parent_category = document.getElementById('category_select');
const child_category = document.getElementById('type_select');
const optgroup = child_category.querySelectorAll('optgroup');
let selectedNode;
parent_category.addEventListener("change", function(e) {
let selectedValue = e.target.value;
child_category.selectedIndex = -1; // deselect previouly selected option
if (selectedNode) {
selectedNode.hidden = false;
}
Array.from(optgroup).forEach((node) => {
let nv = node.getAttribute('value');
if (nv !== selectedValue) {
selectedNode = node;
node.hidden = true;
// if you remove the child than no way to append back to select box
// while (node.firstChild) {
// node.removeChild(node.firstChild);
// }
// child_category.removeChild(node);
}
});
});
<select id="category_select">
<option value="">Please select</option>
<option value="1">Electronics</option>
<option value="2">Appliances</option>
</select>
<select id="type_select">
<option value="" disabled="">Please select</option>
<optgroup label="Electronics" value="1">
<option value="P">Phones</option>
<option value="T">Tablets</option>
</optgroup>
<optgroup label="Appliances" value="2">
<option value="C">Couch</option>
<option value="R">Refrigerator</option>
<option value="V">Vacuum</option>
</optgroup>
</select>

How to redirect drop down menu when option is selected?

I want to be able to jump to the web page when the option is selected from the third drop down menu.
Javascript:
var stateObject = {
"California": {
"Monterey": ["Salinas", "Gonzales"],
"Alameda": ["Oakland", "Berkeley"]
},
"Oregon": {
"Douglas": ["Roseburg", "Winston"],
"Jackson": ["Medford", "Jacksonville"]
}
}
window.onload = function () {
var stateSel = document.getElementById("stateSel"),
countySel = document.getElementById("countySel"),
citySel = document.getElementById("citySel");
for (var state in stateObject) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
stateSel.onchange = function () {
countySel.length = 1; // remove all options bar first
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var county in stateObject[this.value]) {
countySel.options[countySel.options.length] = new Option(county, county);
}
}
stateSel.onchange(); // reset in case page is reloaded
countySel.onchange = function () {
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var cities = stateObject[stateSel.value][this.value];
for (var i = 0; i < cities.length; i++) {
citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
}
}
}
HTML:
<form name="myform" id="myForm">
<select name="optone" id="stateSel" size="1">
<option value="" selected="selected">Select state</option>
</select>
<br>
<br>
<select name="opttwo" id="countySel" size="1">
<option value="" selected="selected">Please select state first</option>
</select>
<br>
<br>
<select name="optthree" id="citySel" size="1">
<option value="" selected="selected">Please select county first</option>
</select>
</form>
example
Any idea how to resolve this?

Adding:
citySel.onchange = function(){
window.location.href = "http://google.it";
}
At the bottom of window.onload = function () { should do the job.
You probabily want to do something like:
citySel.onchange = function(){
switch(citySel.value){
case "Salinas":
window.location.href = "http://salinas.com";
break;
case "Gonzales":
if(stateSel.value == "Something"){
window.location.href = "http://gonzales.com";
}else if(stateSel.value == "Else"){
window.location.href = "http://gonzales.com";
}
break;
}

Add onchange handler to your city select.
var stateObject = {
"California": {
"Monterey": ["Salinas", "Gonzales"],
"Alameda": ["Oakland", "Berkeley"]
},
"Oregon": {
"Douglas": ["Roseburg", "Winston"],
"Jackson": ["Medford", "Jacksonville"]
}
}
window.onload = function () {
var stateSel = document.getElementById("stateSel"),
countySel = document.getElementById("countySel"),
citySel = document.getElementById("citySel");
for (var state in stateObject) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
stateSel.onchange = function () {
countySel.length = 1; // remove all options bar first
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var county in stateObject[this.value]) {
countySel.options[countySel.options.length] = new Option(county, county);
}
}
stateSel.onchange(); // reset in case page is reloaded
countySel.onchange = function () {
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var cities = stateObject[stateSel.value][this.value];
for (var i = 0; i < cities.length; i++) {
citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
}
}
citySel.onchange = function () {
if(stateSel.options.length > 0 && countySel.options.length) {
alert('County: '+countySel.value + ' - State: ' +stateSel.value + ' - City: ' +citySel.value);
location.href = '/'; // your link
}
}
}
<form name="myform" id="myForm">
<select name="optone" id="stateSel" size="1">
<option value="" selected="selected">Select state</option>
</select>
<br>
<br>
<select name="opttwo" id="countySel" size="1">
<option value="" selected="selected">Please select state first</option>
</select>
<br>
<br>
<select name="optthree" id="citySel" size="1">
<option value="" selected="selected">Please select county first</option>
</select>
</form>

The following line can be used in an onChange event for the select box:
window.location.replace("http://YOUR-URL-HERE.com");
var stateObject = {
"California": {
"Monterey": ["Salinas", "Gonzales"],
"Alameda": ["Oakland", "Berkeley"]
},
"Oregon": {
"Douglas": ["Roseburg", "Winston"],
"Jackson": ["Medford", "Jacksonville"]
}
}
window.onload = function () {
var stateSel = document.getElementById("stateSel"),
countySel = document.getElementById("countySel"),
citySel = document.getElementById("citySel");
for (var state in stateObject) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
stateSel.onchange = function () {
countySel.length = 1; // remove all options bar first
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var county in stateObject[this.value]) {
countySel.options[countySel.options.length] = new Option(county, county);
}
}
stateSel.onchange(); // reset in case page is reloaded
countySel.onchange = function () {
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var cities = stateObject[stateSel.value][this.value];
for (var i = 0; i < cities.length; i++) {
citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
}
}
citySel.onchange = function () {
//redirect page
window.location.replace("http://stackoverflow.com");
}
}
<form name="myform" id="myForm">
<select name="optone" id="stateSel" size="1">
<option value="" selected="selected">Select state</option>
</select>
<br>
<br>
<select name="opttwo" id="countySel" size="1">
<option value="" selected="selected">Please select state first</option>
</select>
<br>
<br>
<select name="optthree" id="citySel" size="1">
<option value="" selected="selected">Please select county first</option>
</select>
</form>

Changing 2nd dropdown values according to 1st using javascript values coming from database

I am trying to get values form database in two drop downs where, If i choose any option from 1st drop down the 2nd drop down should be populated with the database values related to that field and till now I have done this. where should I mention about my database details so that it fetch from database values.
<label> List of Tables : </label><br>
<form name="myform" id="myForm">
<select name="optone" id="jobSelect" size="1">
<option value="" selected="selected">Select job</option>
</select>
<br>
<br>
<select name="opttwo" id="attrSelect" size="1">
<option value="" selected="selected">Select attribute</option>
</select>
</form>
<script> // AJAX Implementation
function showJobs() {
str = document.getElementById("jobs").value;
str1 = document.getElementById("attributes").value;
if (str == "" || str1 == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "listCourseByAjax.php?p=" + str + "&q=" + str1, true);// **DONOT KNOW WHAT TO DO HERE AS I am not using php I m using java**
xmlhttp.send();
}
</script>

It basically involves handling onChange event on your
For beginning, add unique id to both select element
For code detail reference see DEMO.
HTML
<form name="myform" id="myForm">
<select name="optone" id="stateSel" size="1">
<option value="" selected="selected">Select state</option>
</select>
<br>
<br>
<select name="opttwo" id="countySel" size="1">
<option value="" selected="selected">Please select state first</option>
</select>
<br>
<br>
<select name="optthree" id="citySel" size="1">
<option value="" selected="selected">Please select county first</option>
</select>
</form>
<hr/>
Version 2 has autoselect of single options
JS
var stateObject = {
"California": {
"Monterey": ["Salinas", "Gonzales"],
"Alameda": ["Oakland", "Berkeley"]
},
"Oregon": {
"Douglas": ["Roseburg", "Winston"],
"Jackson": ["Medford", "Jacksonville"]
}
}
window.onload = function () {
var stateSel = document.getElementById("stateSel"),
countySel = document.getElementById("countySel"),
citySel = document.getElementById("citySel");
for (var state in stateObject) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
stateSel.onchange = function () {
countySel.length = 1; // remove all options bar first
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var county in stateObject[this.value]) {
countySel.options[countySel.options.length] = new Option(county, county);
}
}
stateSel.onchange(); // reset in case page is reloaded
countySel.onchange = function () {
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var cities = stateObject[stateSel.value][this.value];
for (var i = 0; i < cities.length; i++) {
citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
}
}
}

hide elements of the select dropdown

I have a 2 select dropdowns each of them have bunch of elements (just an example below).
<select id="one">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select id="two">>
<option>2</option>
<option>4</option>
<option>6</option>
<option>8</option>
</select>
How do I ide some options in second dropdown when the first dropdown element is selected. (for example, if 1 is selected in dropdown #1, then 1+2=2 option should be hidden in dropdown #2, if 2 is seected in #1, then 2+2=(4) should be hidden in #2. etc.
I guess I need to approach it with something like this:
document.getElementById("one").onchange = function( ){
var selectedOption = document.getElementById("one").options[document.getElementById("one").selectedIndex].text;
}
What should I do next?

Without jQuery:
document.getElementById("one").onchange = function( ){
var selectedOption = this.options[this.selectedIndex].text;
var option = getElementByText(document.getElementById("two"), selectedOption * 2);
option.style.display = "none"; // or u car remove it here
}
function getElementByText(parent, text) {
for (var i = 0; i < parent.children.length; i ++) {
if (parent.children[i].text == text) {
return parent.children[i];
}
}
return false;
}
jsfiddle

Selecting 1 removes 2, 2 removes 4, 3 removes 6, 4 removes 8 from second dropdown.
<script>
function updateSet2(sel){
var select2 = document.getElementById("two");
select2.options.length = 0; //clear
//repopulate
select2.options[0] = new Option('2', '2');
select2.options[1] = new Option('4', '4');
select2.options[2] = new Option('6', '6');
select2.options[3] = new Option('8', '8');
//remove selected
select2.options.remove(sel - 1);
}
var select1 = document.getElementById("one");
select1.onchange = function(e){
var selected = this.options[this.selectedIndex]
updateSet2(selected.text);
}
</script>

another option:
<script>
var doChange = (function() {
var storedSel;
return function () {
var sel0 = this;
var sel1 = sel0.form.sel1;
var opt;
storedSel = storedSel || sel1.cloneNode(true);
// Show all options of sel1
sel1.parentNode.replaceChild(storedSel.cloneNode(true), sel1);
sel1 = sel0.form.sel1;
// Hide some based on selection
if (sel0.value == 1) {
sel1.removeChild(sel1.options[3]);
sel1.removeChild(sel1.options[1]);
} else if (sel0.value == 2) {
sel1.removeChild(sel1.options[2]);
}
}
}());
window.onload = function() {
document.forms.f0.sel0.onchange = doChange;
}
</script>
<form id="f0">
<select name="sel0" size="4">
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
</select>
<select name="sel1" size="4">
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
</select>
</form>