...

View Full Version : Dropdown help



SlayerACC
03-17-2012, 07:42 PM
if I had two dropdown boxes...

If I select the first one with the value of the month name .. eg.. January.

How can I get the second dropdown box below to get that same value.??

Thanks S.

Philip M
03-17-2012, 08:15 PM
<select id = "mysel1" onchange ="document.getElementById('mysel2').selectedIndex=this.selectedIndex">
<option value = "0"> Select a month ...</option>
<option value = "1">January</option>
<option value = "2">February</option>
<option value = "3">March</option>
</select>

<select id = "mysel2" onchange ="this.selectedIndex = document.getElementById('mysel1').selectedIndex">
<option value = "0"> Select a month ...</option>
<option value = "1">January</option>
<option value = "2">February</option>
<option value = "3">March</option>
</select>

"The reward for conformity was that everyone liked you except yourself". - Rita Mae Brown.

SlayerACC
03-17-2012, 08:27 PM
You are Awesome!!!!!!!!!


Thank you sooo much


Slayer.

webdev1958
03-18-2012, 01:32 AM
<select id = "mysel2" onchange ="this.selectedIndex = document.getElementById('mysel1').selectedIndex">
<option value = "0"> Select a month ...</option>
<option value = "1">January</option>
<option value = "2">February</option>
<option value = "3">March</option>
</select>

There might be noobies scratching their heads wondering why on earth would you need a duplicate set of options in the 2nd <select>

From a maintenace point of view, the set of options in the second <select> are a waste and redundant. If in the future you change the options in the 1st <select>, you will have to make the same change in the 2nd <select> also which seems silly to have to do imo.

Imo a better way to do it is to not have any options in the 2nd <select> initially and then just copy the currently selected <option> in the 1st <select> to the 2nd <select> after first deleting any <option> in the 2nd <select> and set it as selected.

This also removes the need for the onchange in the 2nd <select> which reduces maintenace as well.

This way, if the <option>s have to be changed in the future, you need to make the change in only 1 <select> instead of both of them.

You could do something like this with only 1 set of options and only 1 onchange event handler.


<body>
<select id="sel1" name="sel1">
<option value="" selected="selected">Choose an option</option>
<option value="val1">Option 1</option>
<option value="val2">Option 2</option>
<option value="val3">Option 3</option>
<option value="val4">Option 4</option>
</select>
<select id="sel2" name="sel2"></select>

<script type="text/javascript">
sel1O = document.getElementById('sel1');
sel2O = document.getElementById('sel2');
sel2O.options[sel2O.options.length] = getSelectedOption(); //set initial option in sel2
sel1O.onchange=function(){
sel2O.options.length = 0; //delete any options in sel2
sel2O.options[sel2O.options.length] = getSelectedOption();
sel2O.selectedIndex = 0;
}
function getSelectedOption(){
return sel1O.options[sel1O.selectedIndex].cloneNode(true);
}
</script>
</body>

Philip M
03-18-2012, 09:39 AM
There might be noobies scratching their heads wondering why on earth would you need a duplicate set of options in the 2nd <select>

Imo a better way to do it is to not have any options in the 2nd <select> initially and then just copy the currently selected <option> in the 1st <select> to the 2nd <select> after first deleting any <option> in the 2nd <select> and set it as selected.



I would have thought it equally pointless to have a select box with only one option. And your code throws an error in IE9. :p

Here is another script to transfer the selected options of list1 into list2. This may perhaps be what the OP was really looking for, although he seems to be quite satisfied with the script I gave him.


<form name='myform'>
<select name = 'list1' id = 'list1' onchange = "removeOptions(this)">
<option selected value=""> Choose One Or More Fruits</option>
<option value='Mango'> Mango </option>
<option value='Apple'> Apple </option>
<option value='Sunkist'> Sunkist </option>
<option value='Watermelon'> Watermelon </option>
<option value='Papaya'> Papaya </option>
<option value='Strawberry'> Strawberry </option>
<option value='Banana'> Banana </option>
<option value='Peach'> Peach </option>
</select>

<select name = 'list2' id = 'list2'>
<option value = ""> You have selected:- </option>
</select>

</form>

<script type = "text/javascript">
var val = "";
function removeOptions(selectbox) {
val = selectbox.value;
for (var i = selectbox.options.length-1; i>=1; i--) {
if (selectbox.options[i].selected) {
selectbox.remove(i);
addOption(document.myform.list2,val,val);
document.myform.list1.focus();
}
}
}

function addOption(selectbox,optiontext,optionvalue )
{
var optn = document.createElement("OPTION");
optn.text = optiontext;
optn.value = optionvalue;
selectbox.options.add(optn);
}

</script>

webdev1958
03-19-2012, 12:37 AM
I would have thought it equally pointless to have a select box with only one option. And your code throws an error in IE9. :p


Not all :) The op wanted just the selected option in sel1 to be the selected option in sel2, so the other options in sel2 are redundant and so only one option is required in it.

Also, the script works fine in my IE9 without errors. I suspect you probably have done something wrong again like last time when you claimed that IE9 does not support document.getElementsByClassName() which of course it does ;)

VIPStephan
03-19-2012, 12:53 AM
Imo a better way to do it is to not have any options in the 2nd <select> initially and then just copy the currently selected <option> in the 1st <select> to the 2nd <select> after first deleting any <option> in the 2nd <select> and set it as selected.

[…]

You could do something like this with only 1 set of options and only 1 onchange event handler.


<body>
<select id="sel1" name="sel1">
<option value="" selected="selected">Choose an option</option>
<option value="val1">Option 1</option>
<option value="val2">Option 2</option>
<option value="val3">Option 3</option>
<option value="val4">Option 4</option>
</select>
<select id="sel2" name="sel2"></select>

<script type="text/javascript">

</script>
</body>
Well, in this case you could just generate the select element with JS, too. After all, what’s the semantic value of an empty select element in the document?

Old Pedant
03-19-2012, 02:19 AM
I think that webdev missed a possible great reason for having all the same <option>s in each SELECT.

To pick a common example, suppose that you have DEPARTUREDATE and RETURNDATE sections to your <form>.

So when the user chooses his/her departure month, the return month is set to the same month. And then when he/she chooses a departure day, the return day is set to the same day. This is the way most airline reservation systems work. (Some assume that the return will be one day after the departure...an easy tweak to the code.)

So clearly you *WANT* all months in both <select>s. You just want to make it easy for the user to choose the return date.

webdev1958
03-19-2012, 06:18 AM
So clearly you *WANT* all months in both <select>s.

Unless the op expands on their requirements then I have no way of knowing for sure if they need the duplicate options or not :) and we can go speculating in circles for ever :eek:

The example code I posted meets the op's requirements (as posted by the op) totally. The point of my example is to show that to meet the op's requirements you don't need a duplicate set of options and you need only 1 onchange event handler.

The example philip_m originally posted locks the selected option of the 2nd <select> to be the selected option of the 1st <select>. So if you can't select another option in the 2nd <select> after an option in the 1st <select> has been made (as in philip's code), why have redundant <options> in the 2nd <select>? That's the point I was making :)

Now if the op comes back and changes the initial criteria, then this becomes a whole new ball game :cool:.

webdev1958
03-19-2012, 06:21 AM
Well, in this case you could just generate the select element with JS, too. After all, what’s the semantic value of an empty select element in the document?

That is totally correct and is in fact the way I would do it in "the real world". But I'm trying to use the KISS principle here to some extent as well :)

Old Pedant
03-19-2012, 07:05 AM
Yes, Philip's original code is most likely a mistake. Changing the second <select> almost surely shouldn't result in the change being immediately nullified.

And I never said your code wouldn't work as you said it would. I only said you made an assumption that may or may not be valid. Note that the user did *NOT* say that he wanted the selected <option> to be the only <option> in the second list and/or that he didn't want to allow a change of <option> selection in that list. You inserted that requirement yourself. Don't forget what you get when you "assume".

As you say, we need clarification from the original poster. And we may both be wrong in what he really wants, given the lack of detail in the original requirements.

webdev1958
03-19-2012, 07:09 AM
Yes, Philip's original code is most likely a mistake.

Maybe it is or maybe it isn't. :) The op's reply seems to indicate it wasn't.

The point I was making is that if it wasn't a mistake then you don't need a duplicate set of options and you need only 1 onchange event handler and not 2 :thumbsup:

Old Pedant
03-19-2012, 07:13 AM
Yes, I did understand that point after your post #9. I did not see that was your point in your original post. I have no argument with your aims here. I am quite honestly curious as to just what the heck the original poster really wanted.

webdev1958
03-19-2012, 07:17 AM
.... I did not see that was your point in your original post......

That's ok :). From some of the emails I have received since, most did see the point I was making :thumbsup:

The ones that didn't originally see my point had not actually run philip's original code. After they did, they saw my point :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum