select box problem

by: gibu_georgePosted on 2008-09-10 at 06:10:05ID: 22437905

So all the select drop downs are having the same set of data, You can achive this by removing the the current selection of one select box from other select boxes using. The attached code snippet is used to move a selected entry in one list to another. This may be modified for your purpose

function selectFromList(){
		for(var i=0;i<document.form1.list1.length;i++){
			if (document.form1.list1.options[i].selected){
				 var x = document.form1.list2.length;
				document.form1.list2.options[x] = new Option(document.form1.list1.options[i].text, document.form1.list1.options[i].value)   ;
				document.form1.list1.options[i] =null;	
				i--;
			}
		}
}

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:

Select all Open in new window

by: cofactorPosted on 2008-09-10 at 08:14:39ID: 22439204

I am not sure how your code will work.

I want these features

(1)I'll have 5 select boxes as shown in the above

(2)whatever i choose in any select box ...i cant choose that in other select boxes .

// (may be we need to remove that already chosen value from the other select boxes to achieve this)

I am not sure how this is going to be implemented

by: cmalakarPosted on 2008-09-10 at 21:08:43ID: 22446281

you can disable the options in a select box, by using disabled property of option.

So when there is a change in the select box, you should go and disabled that particular option in all the select boxes.

by: cofactorPosted on 2008-09-10 at 21:44:48ID: 22446386

In other words , i can simplify my problem this way

user cant choose same sequence of select box values.

i.e if a user choose first value in select1
if a user choose first value in select2
if a user choose first value in select3
if a user choose first value in select4
..........................................................

I want to show an error message ..... "Please select distinct security questions from select boxes"

by: cmalakarPosted on 2008-09-10 at 22:05:24ID: 22446455

If you dont want to disable the options..
then in onChange function, you can check, if this selected value is selected in any other select box..
If yes.. throw the message.. and set the default value.

You should do this in javascript.

by: cmalakarPosted on 2008-09-10 at 22:10:27ID: 22446469

Still I suggest disabling is the proper way to do it...

by: cofactorPosted on 2008-09-10 at 23:06:12ID: 22446727

>>So when there is a change in the select box, you should go and disabled that particular option in all the select boxes.

can you show this feature using two select boxes ?

I will do that for all the five select boxes .

btw, what do you mean by disable ? the value will be there but you cant select it ? or the other select boxes will be reduced ?

by: cofactorPosted on 2008-09-10 at 23:18:03ID: 22446775

please note , user can select any of the five select boxes when he starts .

so it seems to me , there is two dynamic parameter here .

by: cmalakarPosted on 2008-09-10 at 23:45:42ID: 22446903

check the example.. here. on how to disable an option.

http://www.java2s.com/Code/JavaScript/Form-Control/Disableorenableanoption.htm

Once disabled, user can't select it, until we enable it again.

by: cofactorPosted on 2008-09-11 at 01:12:40ID: 22447263

this disables the entire select box !

i dont want that.

i just dont want my user to select the same questions again in the select boxes .

by: cofactorPosted on 2008-09-11 at 01:42:54ID: 22447396

are you guys able to understand my problem ?

this is simple .

those five select boxes will carry security questions in fact.

I don't want my user to choose the same security questions in other select boxes .

thats the exact requirement.

by: cmalakarPosted on 2008-09-11 at 02:18:13ID: 22447586

oops sorry.. pointed to wrong url...
try the following code..

it will disable "Orange" when you click the getOptions button

<html>
<head>
<script type="text/javascript">
function getOptions()
{
var x=document.getElementById("mySelect");
x.options[1].disabled = "true";
}
</script>
</head>
<body>
 
<form>
Select your favorite fruit:
<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>
<br /><br />
<input type="button" onclick="getOptions()" value="Output all options">
</form>
</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:

Select all Open in new window

by: cofactorPosted on 2008-09-11 at 03:21:42ID: 22448006

are you sure ..you have pasted the correct code ?

this does not work .

by: cmalakarPosted on 2008-09-11 at 05:05:00ID: 22448717

yes.. It is absolutely working in firefox

by: cmalakarPosted on 2008-09-11 at 05:36:15ID: 22448983

Ok.. I tested in IE.. it is not working there..
It seems, IE has a bug.

The other way to solve your specific problem.. is

in onChange event of every select box.. just go and check, if other select boxes, has the selected value already.
Is yes.. alert the user with the error..

by: cofactorPosted on 2008-09-12 at 01:43:03ID: 22458019

>> just go and check, if other select boxes, has the selected value already.

two challenges here.

a) we don't know which select box user has selected.....he start with any one

b)whats the value of the selected box and the to be selected box.......value comparison.

this is becoming complex i think

by: cofactorPosted on 2008-09-12 at 02:40:34ID: 22458206

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23544029.html?sfQueryTermInfo=1+box+compar+select+valu

i copied the code from there and its working fine :)

thanks to HonorGod:

code is :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> No-duplicates </title>
<script type='text/javascript'>
  function Left(str, n) {
    if (n <= 0)
      return "";
    else if (n > String(str).length)
      return str;
    else
      return String(str).substring(0,n);
  }
 
  function adjustGroup( groupName ) {
    var group = document.getElementsByName( groupName );
    if ( group && group.length > 0 ) {
      //--------------------------------------------------------------
      // Find the currently selected elements from each
      // select list in the group, and allow no duplicates.
      //--------------------------------------------------------------
      used = [];
      for ( var g = 0; g < group.length; g++ ) {
        var sel = group[ g ];
        if ( sel.nodeName == 'SELECT' ) {
          var picked = sel.selectedIndex;
          if ( picked > 0 ) {
            for ( var u = 0; u < used.length; u++ ) {
              if ( picked == used[ u ] ) {
                alert( 'That entry has already been selected.  Please try again.' );
                sel.selectedIndex = 0;
                return
              }
            }
            used.push( picked );
          }
        } else {
          alert( 'Unexpected element type: "' + sel.nodeName + '"' );
        }
      }
      alert( 'Selected: ' + used );
    }
  }
</script>
</head>
<body>
<form>
  <p>
    <select id='select1' name='group1' onchange='adjustGroup("group1");'>
      <option value="val0">--Select</option>
      <option value="val1">one</option>
      <option value="val2">two</option>
      <option value="val3">three</option>
      <option value="val4">four</option>
    </select>
    <select id='select2' name='group1' onchange='adjustGroup("group1");'>
      <option value="val0">--Select</option>
      <option value="val1">one</option>
      <option value="val2">two</option>
      <option value="val3">three</option>
      <option value="val4">four</option>
    </select>
    <select id='select3' name='group1' onchange='adjustGroup("group1");'>
      <option value="val0">--Select</option>
      <option value="val1">one</option>
      <option value="val2">two</option>
      <option value="val3">three</option>
      <option value="val4">four</option>
    </select>
  </p>
</form>
 
</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:

Select all Open in new window

by: cofactorPosted on 2008-09-12 at 03:04:03ID: 22458286

time has come to award point.

i would like to split point between HonorGod and cmalakar .

is there any way i can award point to HonorGod ? i have used the code posted by him.

thanks cmalakar for assisting me so far.

time has come to close this question.

by: cmalakarPosted on 2008-09-12 at 20:55:26ID: 22465517

I dont think.. there is a way to do that ;)

Question

select box problem

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

Java Server Pages (JSP)

Java Standard Edition

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press