[Javascript] Control combination select

**vee10** · Apr 29 '08, 09:09 AM

Hi....

this will help u

Code:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript">
function checkcountry()
{
debugger
selectedIndex = document.getElementById("selecting").selectedIndex;
var name = document.getElementById("selecting").options[selectedIndex].value;
switch(name)
{
case "Frank":
if(document.getElementById("select1").options[document.getElementById("select1").selectedIndex].value != "Japan")
{
alert("Wrong Combination");
document.getElementById("select1").value = "";
}
break;
}
}

</script>
</head>
<body>
<select id="selecting">
<option></option>
<option value="Frank">Frank</option>
<option value="Anthony">Anthony</option>
<option value="Max">Max</option>
<option value="Mark">Mark</option>
</select>
<select id="select1" onchange="checkcountry()">
<option></option>
<option value="Japan">Japan</option>
<option value="Italy">Italy</option>
<option value="England">England</option>
<option value="USA">USA</option>
</select>
</form>

Originally posted by viki1967

Hi all.

I should work this control with javascript:

First select:
1) Frank
2) Anthony
3) Max
4) Mark
5) Vincent
6) Jim

Second select:
1) Japan
2) Italy
3) England
4) USA
5) Mexico
6) Spain

For example, the function javascript must prevent selection is:

from the first Select = Frank
from the second Select = Italy

The exact combination is:

Frank ==> Japan
Anthony ==> Italy
Max ==> England
Mark ==> USA
Vincent ==> Mexico
Jim ==> Spain

All other possible combination is wrong.

Thanks for your attention, regards
Viki

**acoder** · Apr 29 '08, 09:33 AM

Or, even easier, just check that the selectedIndex of both select elements are the same.

Having said that, though, I don't see the need for the second select. If you already know what the country should be for each person, just use a textbox to display it instead of getting the user to select something.

Make validation as easy as possible, and in this case, it's completely unnecessary (unless it's supposed to be a test or something).

**viki1967** · Apr 29 '08, 09:36 AM

thanks x your reply, but this script presents problems with this line:

debugger

the script is stopped....

**viki1967** · Apr 29 '08, 09:39 AM

Originally posted by acoder

Or, even easier, just check that the selectedIndex of both select elements are the same.

Having said that, though, I don't see the need for the second select. If you already know what the country should be for each person, just use a textbox to display it instead of getting the user to select something.

Make validation as easy as possible, and in this case, it's completely unnecessary (unless it's supposed to be a test or something).

Hello Acoder, how are you?

Certainly is easy for you..... not for me

Few lines of code would be asking too much?

thanks

**vee10** · Apr 29 '08, 10:15 AM

hey..
just delete the debugger statement
it is just used for debugging the code

Originally posted by viki1967

Hello Acoder, how are you?

Certainly is easy for you..... not for me

Few lines of code would be asking too much?

thanks

**acoder** · Apr 29 '08, 10:26 AM

Originally posted by viki1967

Hello Acoder, how are you?

I'm fine, thanks!

Originally posted by viki1967

Certainly is easy for you..... not for me

Few lines of code would be asking too much?

Say you have two select elements, select1 and select2:
[code=javascript]if (select1.select edIndex != select2.selecte dIndex) {
alert("Error... ");
}[/code]However, note the rest of my earlier post. You don't need a second select element here.

**viki1967** · Apr 29 '08, 10:26 AM

Originally posted by vee10

hey..
just delete the debugger statement
it is just used for debugging the code

OK, thanks.

I modify this add " case Anthony ":

[php]
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript">
function checkcountry()
{

selectedIndex = document.getEle mentById("selec ting").selected Index;
var name = document.getEle mentById("selec ting").options[selectedIndex].value;
switch(name)
{
//*************** *************** *********

case "Frank":
if(document.get ElementById("se lect1").options[document.getEle mentById("selec t1").selectedIn dex].value != "Japan")
{
alert("Wrong Combination");
document.getEle mentById("selec t1").value = "";
}

case "Anthony":
if(document.get ElementById("se lect1").options[document.getEle mentById("selec t1").selectedIn dex].value != "Italy")
{
alert("Wrong Combination");
document.getEle mentById("selec t1").value = "";
}

//*************** *************** *********
break;
}
}

</script>
</head>
<body>
<select id="selecting" size="1" name="first">
<option></option>
<option value="Frank">F rank</option>
<option value="Anthony" >Anthony</option>
<option value="Max">Max </option>
<option value="Mark">Ma rk</option>
</select>

<select id="select1" onchange="check country()" name="second" size="1">
<option></option>
<option value="Japan">J apan</option>
<option value="Italy">I taly</option>
<option value="England" >England</option>
<option value="USA">USA </option>
</select>
</form>
[/php]

But the script response with:

Object doesn't support this property or method

...

**vee10** · Apr 29 '08, 10:35 AM

hello...

break should be placed for every case
example

Code:

switch()
{
case "Frank":
break;
case "Anthony":
----
break;
}

at which position u r getting the object not supported

Originally posted by viki1967

OK, thanks.

I modify this add " case Anthony ":

[php]
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript">
function checkcountry()
{

selectedIndex = document.getEle mentById("selec ting").selected Index;
var name = document.getEle mentById("selec ting").options[selectedIndex].value;
switch(name)
{
//*************** *************** *********

case "Frank":
if(document.get ElementById("se lect1").options[document.getEle mentById("selec t1").selectedIn dex].value != "Japan")
{
alert("Wrong Combination");
document.getEle mentById("selec t1").value = "";
}

case "Anthony":
if(document.get ElementById("se lect1").options[document.getEle mentById("selec t1").selectedIn dex].value != "Italy")
{
alert("Wrong Combination");
document.getEle mentById("selec t1").value = "";
}

//*************** *************** *********
break;
}
}

</script>
</head>
<body>
<select id="selecting" size="1" name="first">
<option></option>
<option value="Frank">F rank</option>
<option value="Anthony" >Anthony</option>
<option value="Max">Max </option>
<option value="Mark">Ma rk</option>
</select>

<select id="select1" onchange="check country()" name="second" size="1">
<option></option>
<option value="Japan">J apan</option>
<option value="Italy">I taly</option>
<option value="England" >England</option>
<option value="USA">USA </option>
</select>
</form>
[/php]

But the script response with:

Object doesn't support this property or method

...

**viki1967** · Apr 29 '08, 11:20 AM

Ok, many thanks for your reply.

I try this:

- in the second select i select value "Italy";
- in the first select i select value "Frank";

This combination is wrong but the script not open window alert and the form is valid.... why ?

**acoder** · Apr 29 '08, 11:39 AM

Originally posted by viki1967

Ok, many thanks for your reply.

I try this:

- in the second select i select value "Italy";
- in the first select i select value "Frank";

This combination is wrong but the script not open window alert and the form is valid.... why ?

The onchange is only set on the second select, not the first.

**r035198x** · Apr 29 '08, 12:02 PM

Don't forget the earlier advice. If Frank implies Italy then Frank alone is sufficient to specify Italy. Why not Just display one dropdown with values of Name : Country e.g "Frank: Italy"?

**viki1967** · Apr 29 '08, 12:15 PM

Originally posted by acoder

The onchange is only set on the second select, not the first.

Ok, I modify this:

[php]
<select id="selecting" onchange="check country()" name="first" size="1">
<option></option>
<option value="Frank">F rank</option>
<option value="Anthony" >Anthony</option>
<option value="Max">Max </option>
<option value="Mark">Ma rk</option>
</select>

<select id="select1" onchange="check country()" name="second" size="1">
<option></option>
<option value="Japan">J apan</option>
<option value="Italy">I taly</option>
<option value="England" >England</option>
<option value="USA">USA </option>
</select>
[/php]

But if select from first select value "frank" the script response whit:

"Wrong Combination"

Because see the second select empty.... or not ?

**acoder** · Apr 29 '08, 12:28 PM

Like I've mentioned twice, and r035198x has repeated, this is not required.

You already know the combinations.

Why are you using two select elements?

**viki1967** · Apr 29 '08, 12:42 PM

Originally posted by acoder

Like I've mentioned twice, and r035198x has repeated, this is not required.

You already know the combinations.

Why are you using two select elements?

Because so constructed the data form... are a lot data to be recorded on the form... without two select I rewriting the form and the page PHP processing data... no time...

thanks for your help...

[Javascript] Control combination select

[Javascript] Control combination select

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment