...

View Full Version : Link in array list



linkysnake
11-14-2012, 07:43 PM
Hi, i want to put a link in the last option of this select list(the array element, like Cádiz, Córdoba,etc), depending of the option the link must be diferent, the problem is i have no idea how to do that i'm a noob in javascript topic.

Here´s an example of my list:

Javascript:


<script languaje="JavaScript">
<!--
provincias = new Array();
provincias[0] = new Array();
provincias[1] = new Array('Almería','Cádiz','Córdoba','Granada','Huelva','Jaén','Málaga','Sevilla');
provincias[2] = new Array('Huesca','Teruel','Zaragoza');
provincias[3] = new Array('Asturias');
provincias[4] = new Array('Baleares');
function cambiar(formulario){
var i = 0;
var select1 = formulario['D1'];
var select2 = formulario['D2'];
var vector = provincias[select1.selectedIndex];
if(vector.length)select2.length=vector.length;
while(vector[i]){
select2.options[i].value = vector[i];
select2.options[i].text = vector[i];
i++;
}
select2.options[0].selected = 1;
}
-->
</script>

HTML:


<form method="POST">
<select name="D1" onchange="cambiar(this.form)">
<option>-</option>
<option>Andalucía</option>
<option>Aragón</option>
<option>Asturias</option>
<option>Baleares</option>
</select>
<select name="D2">
<option>-</option>
</select></p>
</form>

Thank you

PD: sorry for my bad english

jmrker
11-15-2012, 03:09 AM
Hi, i want to put a link in the last option of this select list(the array element, like Cádiz, Córdoba,etc), depending of the option the link must be diferent, the problem is i have no idea how to do that i'm a noob in javascript topic.

Here´s an example of my list:

Javascript:


<script languaje="JavaScript">
<!--
... VERY OLD code and language is mis-spelled.
-->
</script>

HTML:


...

Thank you

PD: sorry for my bad english

I am unclear about your first statement. Only (?) the last element of the select list?

This is my best guess as to what you are trying to do.
Note: I have only populated the second (D2) select list with some dummy links.
You will need to provide your own to get it to go where you desire.



<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title> Untitled </title>

<script type="text/javascript">
provincias = new Array();
provincias[0] = [];
provincias[1] = ['-|-','Almería|-','Cádiz|-','Córdoba|-','Granada|-','Huelva|-','Jaén|-','Málaga|-','Sevilla|-'];
provincias[2] = ['-|-','Huesca|http://www.webdeveloper.com','Teruel|http://www.codingforums.com','Zaragoza|http://www.dreamincode.net'];
provincias[3] = ['-|-','Asturias|-'];
provincias[4] = ['-|-','Baleares|-'];

function cambiar(formulario){
var i = 0;
var select1 = formulario['D1'];
var select2 = formulario['D2'];
var vector = provincias[select1.selectedIndex];
if(vector.length)select2.length=vector.length;
var tarr = [];
while(vector[i]){
tarr = vector[i].split('|');
select2.options[i].value = tarr[1];
select2.options[i].text = tarr[0];
i++;
}
select2.options[0].selected = 1;
}
function linkToSite(info) {
if (info != '-') { alert(info); } // this line is for testing purposes only
if (info != '-') { document.location.href = info; }
}
</script>

<style type="text/css">

</style>
</head>
<body>
<form method="POST">
<select name="D1" onchange="cambiar(this.form)">
<option>-</option>
<option>Andalucía</option>
<option>Aragón</option>
<option>Asturias</option>
<option>Baleares</option>
</select>
<select name="D2" onchange="linkToSite(this.value)">
</select></p>
</form>
</body>
</html>

Post back if you have questions about my changes.

linkysnake
11-15-2012, 05:06 AM
Thank you so much, thats what i was talking about...just another question...is there anyway to generate the link taking the first and the second option with a base url, this is what i mean:

baseurl+option1+option2.html

something like that?? i'm new in this stuff acctually i don't know anything, but i like to take a look and see how the code works (or at least the mayor part of the code jeje).

Thank you.

jmrker
11-15-2012, 05:10 PM
Thank you so much, thats what i was talking about...just another question...is there anyway to generate the link taking the first and the second option with a base url, this is what i mean:

baseurl+option1+option2.html

something like that?? i'm new in this stuff acctually i don't know anything, but i like to take a look and see how the code works (or at least the mayor part of the code jeje).

Thank you.

Minor changes:


function linkToSite(formulario) {
var select1 = formulario['D1'];
var select2 = formulario['D2'];
alert('baseURL '+select1.value+' '+select2.value);
}

...

<select name="D2" onchange="linkToSite(this.form)">

And remove un-needed URL portions from 'provincias' array elements

Note: for consistency, you could change array assignment to:


var provincias = [];

linkysnake
11-20-2012, 04:23 PM
Thank you so much :thumbsup:

jmrker
11-20-2012, 04:45 PM
Thank you so much :thumbsup:

You're most welcome.
Happy to help.
Good Luck!
:)

linkysnake
11-20-2012, 04:49 PM
Can you post the complete code with the minor changes? The first time it works but just 1 time, i think i made the changes in the wrong part or something...

Thank you so much again :)

jmrker
11-20-2012, 06:42 PM
Can you post the complete code with the minor changes? The first time it works but just 1 time, i think i made the changes in the wrong part or something...

Thank you so much again :)

The code I would post is already there in post #2 and #4.
It would be better if you posted the code you are using to see what it is that you are doing wrong.

linkysnake
11-20-2012, 07:30 PM
Ok, the problem is i don't have idea of where to place the minor changes in the post #4 ,that's why i'm asking you for the complete example code :confused:..... i'm using this one:


<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title> Untitled </title>

<script type="text/javascript">
provincias = new Array();
provincias[0] = [];
provincias[1] = ['-|-','Almería|-','Cádiz|-','Córdoba|-','Granada|-','Huelva|-','Jaén|-','Málaga|-','Sevilla|-'];
provincias[2] = ['-|-','Huesca|http://www.webdeveloper.com','Teruel|http://www.codingforums.com','Zaragoza|http://www.dreamincode.net'];
provincias[3] = ['-|-','Asturias|-'];
provincias[4] = ['-|-','Baleares|-'];

function cambiar(formulario){
var i = 0;
var select1 = formulario['D1'];
var select2 = formulario['D2'];
var vector = provincias[select1.selectedIndex];
if(vector.length)select2.length=vector.length;
var tarr = [];
while(vector[i]){
tarr = vector[i].split('|');
select2.options[i].value = tarr[1];
select2.options[i].text = tarr[0];
i++;
}
select2.options[0].selected = 1;
}
function linkToSite(info) {
if (info != '-') { alert(info); } // this line is for testing purposes only
if (info != '-') { document.location.href = info; }
}

function linkToSite(formulario) {
var select1 = formulario['D1'];
var select2 = formulario['D2'];
alert('baseURL '+select1.value+' '+select2.value);
}
</script>

<style type="text/css">

</style>
</head>
<body>
<form method="POST">
<select name="D1" onchange="cambiar(this.form)">
<option>-</option>
<option>Andalucía</option>
<option>Aragón</option>
<option>Asturias</option>
<option>Baleares</option>
</select>
<select name="D2" onchange="linkToSite(this.value)">
</select></p>
</form>
</body>
</html>

thank you again :D

jmrker
11-20-2012, 08:13 PM
The program will do very little for you until you fill in the appropriate links in the 'provincias' array.
In the following I have only set-up dummy choices for:
'Aragon' and 'Huesca' or 'Teruel' or 'Zaragoza'

There are no other elements initialized. Their selection will only show a blank '-' alert
Also, since they would link to different baseURL locations, I have left it defined as a blank because you have not provided it as requested.

Finally, I have used an alert to display the link to show where it would go to.
I do not go to it unless you uncomment the document.href.location = ???somewhere??? line.

You have not provided me enough information to complete the project for you and my mind reading skills suck!



<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title> Untitled </title>

<script type="text/javascript">

// NOTE: You need to fill in the links as defined by your requirements in the following array elements
var provincias = [
[], // spare (not used in this version of program)
['-|-','Almería|-',
'Cádiz|-',
'Córdoba|-',
'Granada|-',
'Huelva|-',
'Jaén|-',
'Málaga|-',
'Sevilla|-'],
['-|-','Huesca|http://www.webdeveloper.com',
'Teruel|http://www.codingforums.com',
'Zaragoza|http://www.dreamincode.net'],
['-|-','Asturias|-'],
['-|-','Baleares|-'] // Note: no comma after final entry
];

function cambiar(formulario){
var i = 0;
var select1 = formulario['D1'];
var select2 = formulario['D2'];
var vector = provincias[select1.selectedIndex];
if(vector.length)select2.length=vector.length;
var tarr = [];
while(vector[i]){
tarr = vector[i].split('|');
select2.options[i].value = tarr[1];
select2.options[i].text = tarr[0];
i++;
}
select2.options[0].selected = 1;
}
function linkToSite(info) {
if (info != '-') { alert(info); } // this line is for testing purposes only
if (info != '-') { document.location.href = info; }
}

function linkToSite(formulario) {
var select1 = formulario['D1'];
var select2 = formulario['D2'];
var baseURL = ''; // defined as some common URL if same for all links
var str = '';
str = select2.value; // add in baseURL if defined and the same for all links (???)
alert(str); // remove after testing

// following can be substituted, ONCE DEFINED, to go to link selected
// str += baseURL+' - '+select1.value + ' - ' + select2.value;
// document.href.location = str; // to go to link chosen
}
</script>

<style type="text/css">

</style>
</head>
<body>
<form method="POST">
<select name="D1" onchange="cambiar(this.form)">
<option>-</option>
<option>Andalucía</option>
<option>Aragón</option>
<option>Asturias</option>
<option>Baleares</option>
</select>
<select name="D2" onchange="linkToSite(this.form)">
</select></p>
</form>
</body>
</html>

linkysnake
11-20-2012, 08:37 PM
Sorry for the inconveniences :(, i will explain what i want to do the mos clearly i can.

I have the list with 2 options that take me to link i defined (the first code you provide me in the #2 post) and works fine, but what i'm asking for now is something like this:

let's imagine i choose: Andalucia and then Almeria

i want a base url to be the same to all the options no matter wich i choose, mmm like: www.webdeveloper.com

but the link when i choose Almeria must take me to:

www.webdeveloper.com/AndaluciaAlmeria.html

BaseUrl+option1+option2

did i explain myself ok? hope this is clearly sorry my english is not that good...i will ask you for a complete code like the first one because if you indicate me the changes probably i will not be able to understand where to place it.

and Again Thanks for all your help :)

jmrker
11-20-2012, 11:29 PM
Be sure to change the 'baseURL' to your common site or you'll get a lot of 'file not found' errors.


<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title> Untitled </title>

<script type="text/javascript">

// NOTE: You need to fill in the links as defined by your requirements in the following array elements
var provincias = [
[], // spare (not used in this version of program)
['-|-','Almería|Almería',
'Cádiz|Cádiz',
'Córdoba|Córdoba',
'Granada|Granada',
'Huelva|Huelva',
'Jaén|Jaén',
'Málaga|Málaga',
'Sevilla|Sevilla'],
['-|-','Huesca|Huesca',
'Teruel|Teruel',
'Zaragoza|Zaragoza'],
['-|-','Asturias|Asturias'],
['-|-','Baleares|Baleares'] // Note: no comma after final entry
];

function cambiar(formulario){
var i = 0;
var select1 = formulario['D1'];
var select2 = formulario['D2'];
var vector = provincias[select1.selectedIndex];
if(vector.length)select2.length=vector.length;
var tarr = [];
while(vector[i]){
tarr = vector[i].split('|');
select2.options[i].value = tarr[1];
select2.options[i].text = tarr[0];
i++;
}
select2.options[0].selected = 1;
}
function goToSite(info) {
if (info != '-') { alert(info); } // this line is for testing purposes only
// if (info != '-') { document.location.href = info; } // uncomment this line after testing
}

function linkToSite(formulario) {
var select1 = formulario['D1'];
var select2 = formulario['D2'];
var baseURL = 'http://www.codingforums.com/'; // defined as some common URL if same for all links
var str = '';
str = baseURL+select1.value+select2.value+'.html';
goToSite(str);
}
</script>

<style type="text/css">

</style>
</head>
<body>
<form method="POST">
<select name="D1" onchange="cambiar(this.form)">
<option>-</option>
<option>Andalucía</option>
<option>Aragón</option>
<option>Asturias</option>
<option>Baleares</option>
</select>
<select name="D2" onchange="linkToSite(this.form)">
</select></p>
</form>
</body>
</html>

Could be simplified even more with you last requirement,
but not worth the effort if you are happy with the results.

linkysnake
11-21-2012, 03:54 PM
well, with that i need to add to every second option the word i want to add to the link...i was wondering if there's a way to add the actual option1 and option 2, not typing again option 2 like this:

Zaragoza|Zaragoza (if 'm right the bold one will be added to the base URL)

But i want the option i choose adds to the baseurl to save me time typing because my list have like 30 options with 12 sub-options each one, that leaves me with 360 links (actually each one will search for a file to download).

For some reason the code only adds the option2 value to the base URL, again thank you very much for your time you're a Master :thumbsup:

jmrker
11-21-2012, 07:06 PM
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title> Untitled </title>

<script type="text/javascript">

// NOTE: You need to fill in the links as defined by your requirements in the following array elements
var provincias = [
[], // spare (not used in this version of program)
['-','Almería',
'Cádiz',
'Córdoba',
'Granada',
'Huelva',
'Jaén',
'Málaga',
'Sevilla'],
['-','Huesca',
'Teruel',
'Zaragoza'],
['-','Asturias'],
['-','Baleares'] // Note: no comma after final entry
];

function cambiar(formulario){
var i = 0;
var select1 = formulario['D1'];
var select2 = formulario['D2'];
var vector = provincias[select1.selectedIndex];
if(vector.length)select2.length=vector.length;
var tarr = [];
while(vector[i]){
select2.options[i].value = vector[i]; // tarr[1];
select2.options[i].text = vector[i]; // tarr[0];
i++;
}
select2.options[0].selected = 1;
}
function goToSite(info) {
if (info != '-') { alert(info); } // this line is for testing purposes only
// if (info != '-') { document.location.href = info; } // uncomment this line after testing
}

function linkToSite(formulario) {
var select1 = formulario['D1'];
var select2 = formulario['D2'];
var baseURL = 'http://www.codingforums.com/'; // defined as some common URL if same for all links
var str = '';
str = baseURL+select1.value+select2.value+'.html';
goToSite(str);
}
</script>

<style type="text/css">

</style>
</head>
<body>
<form method="POST">
<select name="D1" onchange="cambiar(this.form)">
<option>-</option>
<option>Andalucía</option>
<option>Aragón</option>
<option>Asturias</option>
<option>Baleares</option>
</select>
<select name="D2" onchange="linkToSite(this.form)">
</select></p>
</form>
</body>
</html>




For some reason the code only adds the option2 value to the base URL,

I don't understand your last statement. I works as you requested as far as I can see.

linkysnake
11-21-2012, 07:57 PM
sorry, i check it again and it works fine, i don't know why it wasn't working, my mistake, thank you for all your help i think i solve my problem with your help, now i just need to modify the code because i need some lists without sub-options just and array with one list and baseUrl, i hope i can do that because i have no idea of how to create an alone array in javascript XD, have a good day and thanks for all :)


Update: damn i can't get rid of one list, i only want a simple list with BaseUrl+option1 (with out option 2 list) but i can't i'm not that good with codes :/ hope you can help me...again...

jmrker
11-21-2012, 10:43 PM
Again, without enough information as to what it should look like, my mind reading skills suck!

Show some work to comment upon.

linkysnake
11-23-2012, 04:34 PM
First of all, thanks for your patience.....

When i say level options i mean this

1st Level Options (Andalucía, Aragón, Asturias, Baleares)
2nd level options (the ones in the array)

The first thing i was looking for was a select list with 2 levels with an automatic generated link with a BaseURl + the name of the options, you solved it giving me this code:

Works perfect, but i don't know how to make it to open the links in a new tab instead the same window, that's the only problem i have with that. Hope you can help me with that...


<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title> Untitled </title>

<script type="text/javascript">

// NOTE: You need to fill in the links as defined by your requirements in the following array elements
var provincias = [
[], // spare (not used in this version of program)
['-','Almería',
'Cádiz',
'Córdoba',
'Granada',
'Huelva',
'Jaén',
'Málaga',
'Sevilla'],
['-','Huesca',
'Teruel',
'Zaragoza'],
['-','Asturias'],
['-','Baleares'] // Note: no comma after final entry
];

function cambiar(formulario){
var i = 0;
var select1 = formulario['D1'];
var select2 = formulario['D2'];
var vector = provincias[select1.selectedIndex];
if(vector.length)select2.length=vector.length;
var tarr = [];
while(vector[i]){
select2.options[i].value = vector[i]; // tarr[1];
select2.options[i].text = vector[i]; // tarr[0];
i++;
}
select2.options[0].selected = 1;
}
function goToSite(info) {
if (info != '-') { alert(info); } // this line is for testing purposes only
// if (info != '-') { document.location.href = info; } // uncomment this line after testing
}

function linkToSite(formulario) {
var select1 = formulario['D1'];
var select2 = formulario['D2'];
var baseURL = 'http://www.codingforums.com/'; // defined as some common URL if same for all links
var str = '';
str = baseURL+select1.value+select2.value+'.html';
goToSite(str);
}
</script>

<style type="text/css">

</style>
</head>
<body>
<form method="POST">
<select name="D1" onchange="cambiar(this.form)">
<option>-</option>
<option>Andalucía</option>
<option>Aragón</option>
<option>Asturias</option>
<option>Baleares</option>
</select>
<select name="D2" onchange="linkToSite(this.form)">
</select></p>
</form>
</body>
</html>

Second

I thought that it would be easy to me to modify the code and eliminate the second level options, to just keep 1 level option but with generating and taking me to the link with a "BaseUrl too + the option", in other words, the same thing that the code i post uo here but just for 1 level option, but i can't, and i don't post any code of that because i suck in javascript stuff..

Thank you

jmrker
11-23-2012, 09:23 PM
For your 1st problem, look into: http://www.w3schools.com/jsref/met_win_open.asp
That site shows you all the new window options available from javascript.

Second part. :confused:
Are you expecting for the level one option to do 2 different actions?
Sometimes, it gives you only one link and another time it gives you a different link?
If that is the case, then you need to define for me which links are controlled by which level at the time a selection is made.

OR, are you asking for a SECOND drop down list that has only the first level and no sub-levels to control?

linkysnake
11-26-2012, 03:36 PM
The first problem is solved now...there's just a detail, Internet Explorer take me to the link, bur without adding the first level option to it, Any idea why it is working on Chrome but not in IE?



OR, are you asking for a SECOND drop down list that has only the first level and no sub-levels to control?

Yes, i'm asking for another drop down list with only the first level and no sublevels (but with generated links "BaseUrl+Option")


Thank You :)

jmrker
11-27-2012, 03:29 PM
Add this to code...

HTML:


<select name="D3" onchange="singleLinkToSite(this.form)">
<option value='-'>-</option>
<option value='Andalucia'>Andalucía</option>
<option value='Aragon'>Aragón</option>
<option value='Asturias'>Asturias</option>
<option value='Baleares'>Baleares</option>
</select>
<p />


JS:


function singleLinkToSite(formulario) {
var select1 = formulario['D3'];

// defined as some common URL if same for all links
var baseURL = 'http://www.codingforums.com/';
// could be a 'global' variable if used in multiple functions

var str = '';
str = baseURL+select1.value+'.html';
goToSite(str);
}

007julien
11-27-2012, 03:39 PM
A good method to build a select menu is to use the Option() constructor for the select element.

new Option(text, value, defaultSelected, selected)See this page w3cshools.com page Changing Select element content on the fly (http://www.javascriptkit.com/javatutors/selectcontent.shtml).

linkysnake
11-27-2012, 04:38 PM
Thank you, just 10 min before your post i was able to know how to modify the original code and adapt it to just one drop list :D


You help me a lot and i learn so much things in these days, thank you for all your time and Help.

Thank you too 007julien i will read that to see how it works :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum