PDA

View Full Version : One dropdown value triggers value in another dropdown



green
11-25-2006, 12:14 PM
Hello, there!

I need a script (only needs to work in IE) where on selecting a value in one dropdown box the equivalent value is ALSO selected in another. ie.

Select 3rd value in Dropdown One selects 3rd value in Dropdown Two. etc.

This should also work vice versa (selecting in Dropdown 2 selects equivalent value from Dropdown 1).

I have found this nice little code that does exactly that... BUT,

1) On MY page each dropdown in the pair is in a SEPARATE form (in this code both dropdowns are in the same form)

2) MY dropdowns have DIFFERENT names (not just differentiated by the number as in this code eg. group1, group2. I've found only by having the same name + number will this code work.)

3) I'm also running many pairs of dropdowns on one page. Can the code be adapted for this rather than just repeating the same code for each pair of dropdowns?

Here is the whole code. Can you adapt it to the above criteria? Or, if you have other codes that do the same job I'd like to know. - hope you experts can help me out here! :)

<html>
<head>
<title>Untitled</title>
<script language="JavaScript"><!--

function set_group(what,controller,controlled) {
option=what.elements['group' + controller].selectedIndex;
what.elements['group' + controlled].options[option].selected = true;
}
//--></script>

</head>

<body>
<form name="spanish_phrases">

<select name="group0" onchange="set_group(this.form, 0, 1);">
<option value="Hello">Hello!</option>
<option value="How">How are you?</option>
<option value="fine">I'm fine thanks.</option>
<option value="And">And you?</option>
<option value="Not">Not bad.</option>
</select>

<p><select name="group1" onchange="set_group(this.form, 1, 0);">
<option value="Hola">&iexcl;Hola!</option>
<option value="Que">&iquest;Qu&eacute; tal?</option>
<option value="Bien">Bien, gracias.</option>
<option value="Tu">&iquest;Y t&uacute;?</option>
<option value="Regular">Regular.</option>
</select>

</p>
</form>
</body>
</html>

Twey
11-25-2006, 02:59 PM
<option value="Hola">&iexcl;Hola!</option>One of the many things that irritates me about English is how ubiquitous it has become on the Web. There's absolutely no reason why HTML should have been written with American tag names and keywords. In my opinion, it would have been much better to use a language with no particular national allegiance, such as Esperanto or Lojban. Unfortunately, I don't have the power to change this -- in fact, I doubt anybody does, at this stage of development. However, please don't make the problem any worse by using HTML entities for perfectly standard characters that don't happen to be found in English. Send the page as UTF-8 and enter &#161;, &#191;, &#250;, &c. properly.

Anyway, brief rant over...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--
I don't usually advocate the above tag. However,
omitting it in this case could have some unwanted effects
should the user save the page for later viewing.
-->
<title>A Title</title>
<script type="text/javascript">
function changeSelectValues(f, v, c) {
for(var i = 0, e = f.elements; i < e.length; ++i)
if(e[i].tagName && e[i].tagName.toLowerCase() === "select" && e[i].className.indexOf(c) !== -1)
e[i].selectedIndex = v;
}

window.onload = function() {
for(var i = 0, e = document.forms; i < e.length; ++i)
if(e.elements && e.className.indexOf("selectpairs"))
for(var j = 0, f = e.elements; j < f.length; ++j)
if(f[j].tagName) {
if(f[j].tagName.toLowerCase === "select")
f[j].onchange = function() {
changeSelectValues(this.form, this.selectedIndex, this.class);
};
} else
for(var k = 0, g = f[j]; k < g.length; ++k)
if(g[k].tagName.toLowerCase === "select")
g[k].onchange = function() {
changeSelectValues(this.form, this.selectedIndex, this.class);
};
};
</script>
</head>
<body>
<form action="" onsubmit="return false;" class="selectpairs">
<select class="pairone">
<option value="Hello">Hello!</option>
<option value="How">How are you?</option>
<option value="fine">I'm fine thanks.</option>
<option value="And">And you?</option>
<option value="Not">Not bad.</option>
</select>

<select class="pairone">
<option value="Hola">&#161;Hola!</option>
<option value="Qu&#233;">&#191;Qu&#233; tal?</option>
<option value="Bien">Bien, gracias.</option>
<option value="Tu">&#191;Y t&#250;?</option>
<option value="Regular">Regular.</option>
</select>
</form>
</body>
</html>Untested.

green
11-26-2006, 10:15 AM
Thanks Twey. However, it doesn't work - I get an error message about a missing identifier on line 25. Also, why the window.onload function?

Also, as I said earlier, I do need the two dropdowns working in their own separate forms - (necessary for a code running at the same time that you helped me with earlier, Twey). And furthermore, which variables should be changed for working the code with multiple pairs of dropdowns working on the same page (each dropdown in a separate form)?

On another note. Interesting re. your comment on Spanish characters. Are you saying you not see the upsidedown question mark etc displayed properly? Should I insert that "charset=utf-8" code on all my pages where Spanish is used? Working from Spain and with Spanish software I've never found viewing Spanish characters a problem here.

Hope you can get this sorted.

Twey
11-26-2006, 12:32 PM
Ah, indeed. Try:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--
I don't usually advocate the above tag. However,
omitting it in this case could have some unwanted effects
should the user save the page for later viewing.
-->
<title>A Title</title>
<script type="text/javascript">
function changeSelectValues(c, v) {
var classes = c.split(" "),
nclasses = [];

for(var i = 0; i < classes.length; ++i)
if(/^selectpairs-\w+$/.test(classes[i]))
nclasses.push(classes[i]);

for(var i = 0, e = document.getElementsByTagName("select"); i < e.length; ++i) {
for(var j = 0; j < nclasses.length; ++j)
if(e[i].className.indexOf(nclasses[j]) === -1)
break;
if(j === nclasses.length && j > 0)
e[i].selectedIndex = v;
}
}

window.onload = function() {
for(var i = 0, e = document.getElementsByTagName("select"); i < e.length; ++i)
e[i].onchange = function() {
changeSelectValues(this.className, this.selectedIndex);
};
e = null;
};
</script>
</head>
<body>
<form action="" onsubmit="return false;">
<select class="selectpairs-pairone">
<option value="Hello">Hello!</option>
<option value="How">How are you?</option>
<option value="fine">I'm fine thanks.</option>
<option value="And">And you?</option>
<option value="Not">Not bad.</option>
</select>
</form>

<form action="" onsubmit="return false;">
<select class="selectpairs-pairone">
<option value="Hola">&#161;Hola!</option>
<option value="Qu&#233;">&#191;Qu&#233; tal?</option>
<option value="Bien">Bien, gracias.</option>
<option value="Tu">&#191;Y t&#250;?</option>
<option value="Regular">Regular.</option>
</select>
</form>
</body>
</html>
re. your comment on Spanish characters. Are you saying you not see the upsidedown question mark etc displayed properly?I see them fine. I just think it's rather biased that they should need to be represented by HTML entities just because they don't appear in English. The web has outgrown ASCII now; let's use Unicode as it was intended.
Should I insert that "charset=utf-8" code on all my pages where Spanish is used?Definitely, and use the characters correctly (for example, &#250; instead of &uacute;).

green
11-26-2006, 02:49 PM
Great so far - as the code stands, it works perfectly! BUT....

There is a conflict with some other Javascript I'm running on the same page. I imagine this'll either be very simple for you to resolve or otherwise I'll just have to... I don't know what else I'd do!

Explanation: My idea was that when one dropdown called on its equivalent in Spanish this also triggered a bit of JavaScript (I believe also adapted by Twey or perhaps your colleague) which changed variables in brackets in a textfield. Therefore, after the dropdowns have been selected, the variables are sent to the text field - all in one neat process!

But, when I put the two codes on the same page, the variables to textfield fails to work. Just a tweaking of the code necessary? I hope so because I've been several months writing this and I wouldn't like to go back and start again.

Here is how I've put the two scripts together. Notice, the one you wrote today, Twey, works. But lift the your new JavaScript you just wrote and the variables to textfields work again. Can it all be fitted together? Remember, it only needs to work in IE. :confused:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEST</title>

<script type="text/javascript">
function changeSelectValues(c, v) {
var classes = c.split(" "),
nclasses = [];

for(var i = 0; i < classes.length; ++i)
if(/^selectpairs-\w+$/.test(classes[i]))
nclasses.push(classes[i]);

for(var i = 0, e = document.getElementsByTagName("select"); i < e.length; ++i) {
for(var j = 0; j < nclasses.length; ++j)
if(e[i].className.indexOf(nclasses[j]) === -1)
break;
if(j === nclasses.length && j > 0)
e[i].selectedIndex = v;
}
}

window.onload = function() {
for(var i = 0, e = document.getElementsByTagName("select"); i < e.length; ++i)
e[i].onchange = function() {
changeSelectValues(this.className, this.selectedIndex);
};
e = null;
};
</script>

</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

<script type="text/javascript">

function f17(el){
selectPrintf(el.form, 'op', '%s con relaci&#243;n a %s del (day + date).', 'first', 'second');
}
function selectPrintf(frm, opEl, baseStr /*, selectOneName, selectTwoName, selectThreeName, ... */) {
var opStr = baseStr;
for(var i = 3; i < arguments.length; ++i)
opStr = opStr.replace(/%s/, frm.elements[arguments[i]].options[frm.elements[arguments[i]].selectedIndex].text);
frm.elements[opEl].value = opStr;
}

function f18(el){
selectPrintf(el.form, 'op', '%s writing in reference to %s of (day + date).', 'first', 'second');
}
function selectPrintf(frm, opEl, baseStr /*, selectOneName, selectTwoName, selectThreeName, ... */) {
var opStr = baseStr;
for(var i = 3; i < arguments.length; ++i)
opStr = opStr.replace(/%s/, frm.elements[arguments[i]].options[frm.elements[arguments[i]].selectedIndex].text);
frm.elements[opEl].value = opStr;
}

</script>

<form action="javascript:void(0);" onsubmit="return false;">

<p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center">
<font face="Arial"><b><font face="Arial"><b><a name="12"><font face="Arial"><b><span style="font-size:8pt;">

<textarea rows=2 name="op" size="68" readonly value="(I'm) writing in reference to (our email) of (day + date)." cols="58" class="es" style="font-family:Arial,sans-serif; font-size:10pt; background-color:rgb(222,239,254); border-width:2; border-color:blue; border-top-style:solid; border-right-style:solid; border-bottom-style:none; border-left-style:solid; overflow:hidden;">(I'm) writing in reference to (our email) of (day + date).</textarea>&nbsp;
</span></b></font><font face="Arial"><b><span style="font-size:8pt;"><a title="Remember to insert Spanish version too."><input type=button value=">" onClick="parent.passText2(this.form.op.value); playSound(0);" style="font-family:Arial,sans-serif; font-size:8pt; color:blue; background-color:rgb(222,239,254); margin-top:17pt; border-width:1; border-color:blue; border-style:solid;"></a></span></b></font></b></font></b></font></p>
<p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center"><font face="Arial"><b><font face="Arial"><b><font face="Arial"><b><span style="font-size:8pt;">

<select name="first" onchange="f18(this)" style="font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(222,239,254); border-width:1; border-color:blue; border-style:solid;" class="selectpairs-pairone">
<option selected>(I'm)</option>
<option>(We're)</option>
</select>

<select name="second" onchange="f18(this)" style="font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(222,239,254); border-width:1; border-color:blue; border-style:solid;" class="selectpairs-pairtwo">
<option selected>(our email)</option>
<option>(our telephone conversation)</option>
<option>(our conversation)</option>
<option>(our chat)</option>
<option>(our fax)</option>
<option>(our meeting)</option>
<option>(our videoconference)</option>
</select>

</span></b></font></b></font></b></font></p>
</form>


<form action="javascript:void(0);" onsubmit="return false;">
<p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center">
<font face="Arial"><b><font face="Arial"><b><font face="Arial"><b><span style="font-size:8pt;">

<textarea rows=2 name="op" size="68" readonly value="(Escribo) con relaci&#243;n a (nuestro email) del (day + date)." cols="58" class="es" style="font-family:Arial,sans-serif; font-size:10pt; background-color:rgb(247,225,213); border-width:2; border-color:maroon; border-top-style:none; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; overflow:hidden;">(Escribo) con relaci&#243;n a (nuestro email) del (day + date).</textarea>&nbsp;
<a title="Remember to insert English version too."><input type=button value=">" onClick="parent.passText(this.form.op.value); playSound(1);" style="font-family:Arial,sans-serif; font-size:8pt; color:maroon; background-color:rgb(247,225,213); margin-bottom:13pt; border-width:1; border-color:maroon; border-style:solid;"></a></span></b></font></b></font></b></font></p>
<p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center"><font face="Arial"><b><font face="Arial"><b><font face="Arial"><b><span style="font-size:8pt;">

<select name="first" onchange="f17(this)" style="font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(247,225,213); border-width:1; border-color:maroon; border-style:solid;" class="selectpairs-pairone">
<option selected="selected">(Escribo)</option>
<option>(Escribimos)</option>
</select>

<select name="second" onchange="f17(this)" style="font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(247,225,213); border-width:1; border-color:maroon; border-style:solid;" class="selectpairs-pairtwo">
<option selected>(nuestro email)</option>
<option>(nuestra conversaci&oacute;n telef&oacute;nica)</option>
<option>(nuestra conversaci&oacute;n)</option>
<option>(nuestra charla)</option>
<option>(nuestro fax)</option>
<option>(nuestra reuni&oacute;n)</option>
<option>(nuestra videoconferencia)</option>
</select>

</span></b></font></b></font></b></font></p>
</form>
</body>

</html>

Twey
11-26-2006, 03:52 PM
Yes, that was my script, although this version was modified slightly by jscheuer1. Demo page please?
Also, please use [code] tags when posting code. It makes it a lot easier to read.

green
11-27-2006, 05:42 PM
Thanks for your patience, Twey.

I've stripped all the <style> code off to leave the bare bones so you won't have to wade through my shabby layout. I haven't posted the resulting code as you can obviously see it online at code source in the demos.

What I'm trying to achieve here is for a user to select an option in either English or Spanish and is then given the equivalent in the foreign language in a second textarea.

The two functions are:

1) "function changeSelectValues" you have just written on this thread which selects an equivalent value (translation) in a second dropdown box.

2) "function selectPrintf" your previous code written some months ago, which sends the selected values in the dropdowns, "onChange", to the textareas.

This first link shows BOTH JavaScripts together. Notice, however, only the "function changeSelectValues" actually works.
http://www.englishspanishlink.com/dropdown_problem2

This second link is exactly the same code with the "function changeSelectValues" JavaScript taken out. Notice the "function selectPrintf" now works fine.
http://www.englishspanishlink.com/dropdown_problem

Naturally, what I'm trying to achieve is that "function changeSelectValues" calls on "function selectPrintf" so BOTH the original language and the translation selected from a dropdown are delivered to BOTH textareas on one click.

Possible!!??

Twey
11-27-2006, 09:37 PM
Oh, I see the problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEST</title>

<script type="text/javascript">
function changeSelectValues(c, v) {
var classes = c.split(" "),
nclasses = [];

for(var i = 0; i < classes.length; ++i)
if(/^selectpairs-\w+$/.test(classes[i]))
nclasses.push(classes[i]);

for(var i = 0, e = document.getElementsByTagName("select"); i < e.length; ++i) {
for(var j = 0; j < nclasses.length; ++j)
if(e[i].className.indexOf(nclasses[j]) === -1)
break;
if(j === nclasses.length && j > 0)
e[i].selectedIndex = v;
}
}

window.onload = function() {
for(var i = 0, e = document.getElementsByTagName("select"); i < e.length; ++i) {
e[i].oldonchange = e[i].onchange;
e[i].onchange = function() {
if(typeof this.oldonchange === "function") this.oldonchange();
changeSelectValues(this.className, this.selectedIndex);
};
}
e = null;
};
</script>

</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

<script type="text/javascript">

function f17(el){
selectPrintf(el.form, 'op', '%s con relaci&#243;n a %s del (day + date).', 'first', 'second');
}
function selectPrintf(frm, opEl, baseStr /*, selectOneName, selectTwoName, selectThreeName, ... */) {
var opStr = baseStr;
for(var i = 3; i < arguments.length; ++i)
opStr = opStr.replace(/%s/, frm.elements[arguments[i]].options[frm.elements[arguments[i]].selectedIndex].text);
frm.elements[opEl].value = opStr;
}

function f18(el){
selectPrintf(el.form, 'op', '%s writing in reference to %s of (day + date).', 'first', 'second');
}
function selectPrintf(frm, opEl, baseStr /*, selectOneName, selectTwoName, selectThreeName, ... */) {
var opStr = baseStr;
for(var i = 3; i < arguments.length; ++i)
opStr = opStr.replace(/%s/, frm.elements[arguments[i]].options[frm.elements[arguments[i]].selectedIndex].text);
frm.elements[opEl].value = opStr;
}

</script>


<form action="javascript:void(0);" onsubmit="return false;">
<p align="center">
<textarea rows=2 name="op" size="68" readonly value="(I'm) writing in reference to (our email) of (day + date)." cols="58" class="es"
overflow:hidden;">(I'm) writing in reference to (our email) of (day + date).</textarea>
<br>

<select name="first" class="selectpairs-pairone" onchange="f18(this)">
<option selected>(I'm)</option>
<option>(We're)</option>

</select>

<select name="second" class="selectpairs-pairtwo" onchange="f18(this)">
<option selected>(our email)</option>
<option>(our telephone conversation)</option>
<option>(our conversation)</option>
<option>(our chat)</option>

<option>(our fax)</option>
<option>(our meeting)</option>
<option>(our videoconference)</option>
</select>
</p>
</form>

<form action="javascript:void(0);" onsubmit="return false;">
<p align="center">

<textarea rows=2 name="op" size="68" readonly value="(Escribo) con relaci&#243;n a (nuestro email) del (day + date)." cols="58" class="es"
style=overflow:hidden;">(Escribo) con relaci&#243;n a (nuestro email) del (day + date).</textarea>
<br>

<select name="first" class="selectpairs-pairone" onchange="f17(this)">
<option selected="selected">(Escribo)</option>
<option>(Escribimos)</option>
</select>

<select name="second" class="selectpairs-pairtwo" onchange="f17(this)">

<option selected>(nuestro email)</option>
<option>(nuestra conversaci&oacute;n telef&oacute;nica)</option>
<option>(nuestra conversaci&oacute;n)</option>
<option>(nuestra charla)</option>
<option>(nuestro fax)</option>

<option>(nuestra reuni&oacute;n)</option>
<option>(nuestra videoconferencia)</option>
</select>
</form>

<p>&nbsp;</p>
</body>

</html>Note: please validate (http://validator.w3.org/) your HTML.

green
11-27-2006, 10:49 PM
But note that although on click of element in dropdown the value is sent to host textarea and foreign language dropdown, it does not change the foreign language textarea. :confused:

Here's the link to the demo:
http://www.englishspanishlink.com/dropdown_test_3

green
11-28-2006, 10:19 AM
Thank you Twey

Have tweaked it about a bit and now have the code fully operational so no need to answer my previous question. THANK YOU VERY MUCH FOR ALL YOUR HELP, TWEY - YOU ARE INDEED A CREDIT TO YOUR TRADE.

Kind regards, Mike :)