I've this modified script I found online.
It works very well to have dropdown select menu with 4 posiblities.
The problem here. If a menu is identical like here with Mexico (for Mexico the city and Mexico the country), it won't work correctly.
How i can correct that? Thanks for help!
var categories = [];
// list1
categories["startList"] = ["America","Europe"]
// list2
categories["America"] = ["USA","Mexico"];
categories["Europe"] = ["France","UK"];
// list3
categories["USA"] = ["New York","Texas"];;
categories["Mexico"] = ["Mexico","Guadalajara"];
categories["France"] = ["Alsace","Normandie"];
categories["UK"] = ["Wales", "Scotland", "England"];
// list4
categories["New York"] = ["Manhattan","Brooklyn","Harlem","Queens"];
categories["Texas"] = ["Dallas","Eagle Pass"];
categories["Mexico"] = ["DF"];
categories["Guadalaraja"] = ["East","West"];
categories["Alsace"] = ["Strasbourg","Kronenbourg"];
categories["Normandie"] = ["Caen","Saint-Malo","Saint-Pierre","Saint-Jean"];
categories["Wales"] = ["Cardiff", "New Port"];
categories["Scotland"] = ["Edimbourg"];
categories["England"] = ["London","Manchester","Exeter","Dover"];
var nLists = 4; // number of select lists in the set
function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['tripleplay']['List'+i].length = 1;
document.forms['tripleplay']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}
function init() {
fillSelect('startList',document.forms['tripleplay']['List1'])
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
<form name="tripleplay" action="">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Select One</option>
</select>
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Select Two</option>
</select>
<select name='List3' onchange="fillSelect(this.value, this.form['List4'])">
<option selected >Select Three</option>
</select>
<select name='List4' onchange="getValue(this.value, this.form['List3'].value, this.form['List2'].value,
this.form['List1'].value)">
<option selected >Select Four</option>
</select>
</form>
Original adaptation of https://jsfiddle.net/nbz9atmv/ and https://www.sitepoint.com/community/t/country-state-city-dropdown-list/2438
I noticed a few errors from this snippet.
I would say instead of declaring the city in Mexico as 'Mexico', why not declare it as 'Mexico City'? From what I understand this is what the city is formally recognized as and your code will recognize this as well. So, I changed 'Mexico' the city to 'Mexico City' and it worked perfectly well. This also allows your resulting code to be understood more easily by your target audience.
The second error I noticed was you had 'Guadalajara' spelled incorrectly in 'list 4'.
Also, you had getValue for the list4 select. Removed and changed to this.value. If you need to grab the value simply call the id using JS, if that was your intention.
the replace() will throw an eror but it still works properly as it sitll continues to refrain from multiple values being added to the final dropdown(list4) if changes are made to the previous dropdown(list3).
Below is the code running correctly.
Let me know if this helped!
var categories = [];
// list1
categories["startList"] = ["America","Europe"]
// list2
categories["America"] = ["USA","Mexico"];
categories["Europe"] = ["France","UK"];
// list3
categories["USA"] = ["New York","Texas"];;
categories["Mexico"] = ["Mexico City","Guadalajara"];
categories["France"] = ["Alsace","Normandy"];
categories["UK"] = ["Wales", "Scotland", "England"];
// list4
categories["New York"] = ["Manhattan","Brooklyn","Harlem","Queens"];
categories["Texas"] = ["Dallas","Eagle Pass"];
categories["Mexico City"] = ["DF"];
categories["Guadalajara"] = ["East","West"];
categories["Alsace"] = ["Strasbourg","Kronenbourg"];
categories["Normandy"] = ["Caen","Saint-Malo","Saint-Pierre","Saint-Jean"];
categories["Wales"] = ["Cardiff", "New Port"];
categories["Scotland"] = ["Edimbourg"];
categories["England"] = ["London","Manchester","Exeter","Dover"];
var nLists = 4; // number of select lists in the set
function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['tripleplay']['List'+i].length = 1;
document.forms['tripleplay']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}
function init() {
fillSelect('startList',document.forms['tripleplay']['List1'])
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
<form name="tripleplay" action="">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Select One</option>
</select>
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Select Two</option>
</select>
<select name='List3' onchange="fillSelect(this.value, this.form['List4'])">
<option selected >Select Three</option>
</select>
<select name='List4' onchange="fillSelect(this.value, this.form['List3'].value, this.form['List2'].value,
this.form['List1'].value)">
<option selected >Select Four</option>
</select>
</form>
Related
I'm currently trying to hide the subcategory-select-statement for aslong as there is no maincategory picked in my first select-statement. The same counts for the select-type-statement within the subcategory. The method for a cascading dropdown I use is the same you can find on w3schools, otherwise the code is down below.
Do you know how i can hide the subcategory/type while the select-hierarchy above isn't selected?
For example:
Choose Maincategory(default is "Select Category)", when I change "Select Category" to "MainCategory1" then the select statement of the subcategory appears. Then when the Subcategory option is picked, the typecategory select statement appears.
I hope it is clear what I want to do. Furthermore please excuse my bad use of english. English is not my mother tongue.
var maincatObject = {
"MainCategory1": {
"Subcategory 1.1": ["Type 1.1.1", "Type 1.1.2"],
"Subcategory 1.2": ["Type 1.2.1", "Type 1.2.2"],
"Subcategory 1.3": ["Type 1.3.1", "Type 1.3.2"],
"Subcategory 1.4": ["Type 1.4.1", "Type 1.4.2"]
},
"MainCategory2": {
"Subcategory 2.1": ["Type 2.1.1", "Type 2.1.2"],
"Subcategory 2.2": ["Type 2.2.1", "Type 2.2.2"],
"Subcategory 2.3": ["Type 2.3.1", "Type 2.3.2"],
"Subcategory 2.4": ["Type 2.4.1", "Type 2.4.2"]
}
}
window.onload = function() {
var maincatSel = document.getElementById("maincat");
var subcatSel = document.getElementById("subcat");
var typedevSel = document.getElementById("typedev");
for (var x in maincatObject) {
maincatSel.options[maincatSel.options.length] = new Option(x, x);
}
maincatSel.onchange = function() {
//empty Chapters- and Topics- dropdowns
typedevSel.length = 1;
subcatSel.length = 1;
//display correct values
for (var y in maincatObject[this.value]) {
subcatSel.options[subcatSel.options.length] = new Option(y, y);
}
}
subcatSel.onchange = function() {
//empty Chapters dropdown
typedevSel.length = 1;
//display correct values
var z = maincatObject[maincatSel.value][this.value];
for (var i = 0; i < z.length; i++) {
typedevSel.options[typedevSel.options.length] = new Option(z[i], z[i]);
}
}
}
<select name="maincat" id="maincat">
<option value="" selected="selected">Select Category</option>
</select>
<br><br> Sub-Category:
<select name="subcat" id="subcat">
<option value="" selected="selected">Please select sub-category first</option>
</select>
<br><br> Type/Device:
<select name="typedev" id="typedev">
<option value="" selected="selected">Please select type or device</option>
</select>
<br><br>
Solution:
I managed to do it, for those of you who wonder how I did it... here's the modified JS code:
window.onload = function() {
var maincatSel = document.getElementById("maincat");
var subcatSel = document.getElementById("subcat");
var typedevSel = document.getElementById("typedev");
for (var x in maincatObject) {
maincatSel.options[maincatSel.options.length] = new Option(x, x);
subcatSel.style.display = 'none';
typedevSel.style.display = 'none';
}
maincatSel.onchange = function() {
//empty Chapters- and Topics- dropdowns
subcatSel.style.display = 'block';
typedevSel.style.display = 'none';
subcatSel.length = 1;
typedevSel.length = 1;
//display correct values
for (var y in maincatObject[this.value]) {
subcatSel.options[subcatSel.options.length] = new Option(y, y);
}
}
subcatSel.onchange = function() {
//empty Chapters dropdown
typedevSel.style.display = 'block';
typedevSel.length = 1;
//display correct values
var z = maincatObject[maincatSel.value][this.value];
for (var i = 0; i < z.length; i++) {
typedevSel.options[typedevSel.options.length] = new Option(z[i], z[i]);
}
}
}
The trick was simply to place "variablename.style.display = 'none'/'block';" on the right position. Keep in mind that the code reads from above and for the rest I just used my brain, hehe. I hope this will help anyone who searches for answeres. :)
Try this code
<style>
#sub1, #type1{
display: none;
}
</style>
<select name="main" id="main">
<option value="0" selected>Select Option</option>
<option value="value1">value1</option>
<option value="value2">value2</option>
</select>
<select name="sub1" id="sub1">
<option value="0" selected>Select Option</option>
<option value="value1">value1</option>
<option value="value2">value2</option>
</select>
<select name="type1" id="type1">
<option value="0" selected>Select Option</option>
<option value="value1">value1</option>
<option value="value2">value2</option>
</select>
<script>
var main = document.getElementById('main');
var sub1 = document.getElementById('sub1');
var type1 = document.getElementById('type1');
main.addEventListener('change', function(element){
if(element.target.value == 'value1'){
sub1.style.display = 'block';
}else{
sub1.style.display = 'none';
}
});
sub1.addEventListener('change', function(element){
if(element.target.value == 'value1'){
type1.style.display = 'block';
}else{
type1.style.display = 'none';
}
});
</script>
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 have managed to manipulate existing code to make a 5 tier multi dependent drop down menu form, and it works well. The only problem is I need the same drop down menu system over and over again up to maybe 8 rows.
Although the drop down menu system looks like it is working well and it does on the 1st row there is a glitch on the second row. When you go back one level to the previous dropdown menu and choose another option, instead of the next drop down resetting with the new options it just adds to it and the more you do this the longer the drop down menu grows!
Here is my code:
In HTML Header
<script type="text/javascript" src="5level2.js"></script>
<script type="text/javascript" src="5level22.js"></script>
In HTML Body
<form name="tripleplay">
<p align="center">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Make a selection</option>
</select>
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Make a selection</option>
</select>
<select name='List3' onchange="fillSelect(this.value,this.form['List4']), getValue(this.value, this.form['List2'].value,
this.form['List1'].value)">
<option selected >Make a selection</option>
</select>
<select name='List4' onchange="fillSelect(this.value,this.form['List5']), getValue(this.value, this.form['List3'].value,
this.form['List2'].value, this.form['List1'].value)">
<option selected >Make a selection</option>
</select>
<select name='List5' onchange="getValue(this.value, this.form['List4'].value,
this.form['List3'].value, this.form['List2'].value), this.form['List1'].value)">
<option selected >Make a selection</option>
</select> <input type="text" name="T1" size="10">
<input type="text" name="T2" size="4"></p>
<p align="center">
<select name='List6' onchange="fillSelect(this.value,this.form['List7'])">
<option selected>Make a selection</option>
</select>
<select name='List7' onchange="fillSelect(this.value,this.form['List8'])">
<option selected>Make a selection</option>
</select>
<select name='List8' onchange="fillSelect(this.value,this.form['List9']), getValue(this.value, this.form['List7'].value,
this.form['List6'].value)">
<option selected >Make a selection</option>
</select>
<select name='List9' onchange="fillSelect(this.value,this.form['List10']), getValue(this.value, this.form['List8'].value,
this.form['List7'].value, this.form['List6'].value)">
<option selected >Make a selection</option>
</select>
<select name='List10' onchange="getValue(this.value, this.form['List9'].value,
this.form['List8'].value, this.form['List7'].value), this.form['List6'].value)">
<option selected >Make a selection</option>
</select> <input type="text" name="T3" size="10">
<input type="text" name="T4" size="4"></p>
<p align="center"><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
Here is the script code in 5level2.js
var categories = [];
categories["startList"] = ["England","Spain"]
categories["England"] = ["Premiership"];
categories["Spain"] = ["LaLiga"];
categories["Premiership"] = ["Arsenal","Chelsea"];
categories["LaLiga"] = ["Barca","Madrid"];
categories["Arsenal"] = ["Arsenal Current","Arsenal Legends"];
categories["Chelsea"] = ["Chelsea Current","Chelsea Legends"];
categories["Barca"] = ["Barca Current","Barca Legends"];
categories["Madrid"] = ["Madrid Current","Madrid Legends"];
categories["Arsenal Current"] = ["Sanchez","Ozil"];
categories["Arsenal Legends"] = ["Henry","Begkamp"];
categories["Chelsea Current"] = ["Hazard","Willian"];
categories["Chelsea Legends"] = ["Terry","Lampard"];
categories["Barca Current"] = ["Messi","Suarez"];
categories["Barca Legends"] = ["Xavi","Puyol"];
categories["Madrid Current"] = ["Ronaldo","Bale"];
categories["Madrid Legends"] = ["Figo","Zidane"];
var nLists = 5; // number of select lists in the set
function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['tripleplay']['List'+i].length = 1;
document.forms['tripleplay']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}
function init() {
fillSelect('startList',document.forms['tripleplay']['List1'])
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
Here is script code for 5level22.js
var categories = [];
categories["startList"] = ["England","Spain"]
categories["England"] = ["Premiership"];
categories["Spain"] = ["LaLiga"];
categories["Premiership"] = ["Arsenal","Chelsea"];
categories["LaLiga"] = ["Barca","Madrid"];
categories["Arsenal"] = ["Arsenal Current","Arsenal Legends"];
categories["Chelsea"] = ["Chelsea Current","Chelsea Legends"];
categories["Barca"] = ["Barca Current","Barca Legends"];
categories["Madrid"] = ["Madrid Current","Madrid Legends"];
categories["Arsenal Current"] = ["Sanchez","Ozil"];
categories["Arsenal Legends"] = ["Henry","Begkamp"];
categories["Chelsea Current"] = ["Hazard","Willian"];
categories["Chelsea Legends"] = ["Terry","Lampard"];
categories["Barca Current"] = ["Messi","Suarez"];
categories["Barca Legends"] = ["Xavi","Puyol"];
categories["Madrid Current"] = ["Ronaldo","Bale"];
categories["Madrid Legends"] = ["Figo","Zidane"];
var nLists = 5; // number of select lists in the set
function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['tripleplay']['List'+i].length = 1;
document.forms['tripleplay']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}
function init() {
fillSelect('startList',document.forms['tripleplay']['List6'])
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
Only difference is the string with the 'startList' has changed from List1 to List6.
I initially thought I may have different options in the drop down menus but it may no longer be needed so just one .js file will do with just one list of variables.
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
i have wriiten javascriot for two levels of dropdown on selecting value in first i get values in second dropdown. now what is happening the value that is there in the array is getting assigned to the second dropdown. i want to assign urls as values to the second dropdown and redirect them to those dropdowns.in my below example if i select apparel then i get men and women in second dropdown so if i select men in second dropdown it should go to xyz.com.... so for each option in second dropdown i want it to be redirected to a specific url how can i do it?
<html>
<head>
<script type="text/javascript">
var categories = [];categories["startList"] = ["Apparel","Books"]
categories["Apparel"] = ["Men","Women"];
categories["Books"] = ["Biography","Fiction","Nonfiction"];
var nLists = 2; // number of lists in the set
function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms[0]['List'+i].length = 1;
document.forms[0]['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
//var nurl= url[currCat]
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}
function getValue(isValue) {
alert(isValue);
}
function init() {
fillSelect('startList',document.forms[0]['List1'])
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
</script>
</head>
<body>
<form action="">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Make a selection</option>
</select>
<!--<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Make a selection</option>
</select>-->
<select name='List2' onchange="getValue(this.value)">
<option selected >Make a selection</option>
</select>
</form>
</body>
</html>
First you need to modify your source array as JSON format like this :
var categories = [];categories["startList"] = [{"text":"Apparel","url":"Apparel"},{"text":"Books","url":"Books"}]
categories["Apparel"] = [{"text":"Men","url":"xyz.com"},{"text":"Women","url":"abc.com"}];
categories["Books"] = [{"text":"Biography","url":"Biography.com"},{"text":"Fiction","url":"Fiction.com"},{"text":"Nonfiction","url":"Nonfiction.com"}];
Now, In function we can use it as key value pair :
var nLists = 2; // number of lists in the set
function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms[0]['List'+i].length = 1;
document.forms[0]['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
//var nurl= url[currCat]
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]["text"]);
nOption.setAttribute('value',nCat[each]["url"]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}
function getValue(isValue) {
//alert(isValue);
location.replace("http://" + isValue);
}
That's it !!!