Capturing Select List Options 1

[arpan]

An HTML Form has 2 select lists (where users can select multiple options) along with 2 buttons - "Add" & "Remove". Initially, the 1st select list is completely vacant. When a user selects any option(s) from the 2nd select list & clicks the "Add" button, those options get added to the 1st select list. At the same time, the options which have been added to the 1st select list also get deleted from the 2nd select list. For e.g. (assuming that the 2nd select list has all the 12 months as its options) if a user selects Jan, Feb, Jul & Sep from the 2nd select list & clicks the "Add" button, then Jan, Feb, Jul & Sep get added to the 1st select list. Also these 4 records (Jan, Feb, Jul & Sep) get deleted from the 2nd select list. Similarly, if a user selects any option(s) from the 1st select list & then clicks the "Remove" button, then those options get deleted from the 1st select list & get added to the 2nd select list.

I want to have 2 more hidden fields in this Form so that the options added to the 1st select list from the 2nd list get listed in the 1st hidden field & the options added to the 2nd select list from the 1st select list get listed in the 2nd hidden field. For e.g. if a user chooses Jan, Feb, Jul & Sep from the 2nd select list & adds it to the 1st select list, the value of the 1st hidden field should be 1, 2, 7, 9 (assuming that the months' numbers are the values of the 12 options). Likewise if Jan & Jul are removed from the 1st select list & added to the 2nd select list, the value of the 2nd hidden field should be 1, 7. At the same time, the value of the 1st hidden field should change to 2, 9 (since 1 & 7 have been removed). How do I accomplish this?

Thanks,

Arpan

 

[mwolf00]

Do you want the numbers in the second list only after they've been removed from the first? What about if someone moves JAN & FEB from the second to the first and then removes JAN from the First and the moves it back again???Should the second list still show a 1?

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

 

[mwolf00]

This might need some improvements - depending on the answers to my last post...

<script>

function moveIt(inBool){
window.list1 = document.getElementById(&quot;sel1&quot
window.list2 = document.getElementById(&quot;sel2&quot
window.hideBox1 = document.getElementById(&quot;hide1&quot
window.hideBox2 = document.getElementById(&quot;hide2&quot

if (inBool){
if (list1.selectedIndex != -1){
moveVal = list1.options[list1.selectedIndex]
if (moveVal.value != &quot;&quot{
list2.options[list2.options.length] = new Option(moveVal.text, moveVal.value)
list1.options[list1.selectedIndex] = null
if (hideBox2.value == &quot;&quot{
hideBox2.value = moveVal.value
}
else{
hideBox2.value += &quot;,&quot; + moveVal.value
}
showList()
}
}
}
else{
if (list2.selectedIndex != -1){
moveVal = list2.options[list2.selectedIndex]
if (moveVal.value != &quot;&quot{
list1.options[list1.options.length] = new Option(moveVal.text, moveVal.value)
list2.options[list2.selectedIndex] = null
showList()
}
}
}
}

function showList(){
outStr = &quot;&quot;
for (x=0; x<list1.options.length; x++){
outStr += &quot;,&quot; + list1.options[x].value
}
if (outStr.length > 0){
outStr = outStr.substr (1)
}
hideBox1.value = outStr
}
</script>

<style>
select {width: 100px;}
</style>

<select id=&quot;sel1&quot; size=12></select>
<input type=button onClick=&quot;moveIt(true)&quot; value=&quot;---->&quot;>
<input type=button onClick=&quot;moveIt(false)&quot; value=&quot;<----&quot;>
<select id=&quot;sel2&quot; size=12>
<option value=1>January
<option value=2>February
<option value=3>March
<option value=4>April
<option value=5>May
<option value=6>June
<option value=7>July
<option value=8>August
<option value=9>September
<option value=10>October
<option value=11>November
<option value=12>December
</select>

<br>
Hide 1 <input id=&quot;hide1&quot;><br>
Hide 2 <input id=&quot;hide2&quot;>


Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

 

[arpan]

Hello, my dear friend, thanks for your source code. What you have provided is exactly what I wanted but for a small problem! The problem comes up when more than one option is selected from either of the lists. For e.g., if I select Jan, Apr & Aug from the 2nd select list & add it to the 1st select list, as per your code, only Jan gets added to the 1st select list (due to which the 1st hidden field shows the value as only 1). What I want is Jan, Apr & Aug should get added to the 1st select list & the 1st hidden field should have the value 1, 4, 8. The same should happen when more than one option is selected from the 1st select list & added to the 2nd select list. For e.g, if I select Jan & Aug from the 1st select list & add it to the 2nd select list, the 2nd hidden field should show the value as 1, 8 & the 1st hidden field should show the value as 4 (since 1 & 8 have just been removed).

I hope I have expressed myself clearly. Any workaround to do this?

Thanks once again,

Regards,

Arpan

 

[mwolf00]

<script>

function moveIt(inBool){
window.list1 = document.getElementById(&quot;sel1&quot
window.list2 = document.getElementById(&quot;sel2&quot
window.hideBox1 = document.getElementById(&quot;hide1&quot
window.hideBox2 = document.getElementById(&quot;hide2&quot

if (inBool){
if (list1.selectedIndex != -1){
for (x=0; x<list1.options.length; x++){
if (list1.options[x].selected){
moveVal = list1.options[x]
list2.options[list2.options.length] = new Option(moveVal.text, moveVal.value)
}
}
for (x=list1.options.length-1;x>=0 ;x--){
if (list1.options[x].selected){
if (hideBox2.value == &quot;&quot{
hideBox2.value = list1.options[list1.selectedIndex].value
}
else{
hideBox2.value += &quot;,&quot; + list1.options[list1.selectedIndex].value
}
list1.options[list1.selectedIndex] = null
}
}
}
}
else{
if (list2.selectedIndex != -1){
for (x=0; x<list2.options.length; x++){
if (list2.options[x].selected){
moveVal = list2.options[x]
list1.options[list1.options.length] = new Option(moveVal.text, moveVal.value)
}
}
for (x=list2.options.length-1;x>=0 ;x--){
if (list2.options[x].selected){
list2.options[list2.selectedIndex] = null
}
}
}
}
showList()
}

function showList(){
outStr = &quot;&quot;
for (x=0; x<list1.options.length; x++){
outStr += &quot;,&quot; + list1.options[x].value
}
if (outStr.length > 0){
outStr = outStr.substr (1)
}
hideBox1.value = outStr
}
</script>

<style>
select {width: 100px;}
</style>

<select id=&quot;sel1&quot; size=12 MULTIPLE></select>
<input type=button onClick=&quot;moveIt(true)&quot; value=&quot;---->&quot;>
<input type=button onClick=&quot;moveIt(false)&quot; value=&quot;<----&quot;>
<select id=&quot;sel2&quot; size=12 MULTIPLE>
<option value=1>January
<option value=2>February
<option value=3>March
<option value=4>April
<option value=5>May
<option value=6>June
<option value=7>July
<option value=8>August
<option value=9>September
<option value=10>October
<option value=11>November
<option value=12>December
</select>

<br>
Hide 1 <input id=&quot;hide1&quot;><br>
Hide 2 <input id=&quot;hide2&quot;>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

 

[arpan]

Once again, thanks for your source code but, my dear friend, I am sorry to say that there is yet another small problem. Have you tried executing your code? If so, please do the following - keeping the size of both the select lists=4, scroll down the select list so that you can see the 1st option in the 2nd select list is March. Select March & then click the &quot;Add&quot; button. March gets added to the 1st select list successfully but you will find a blank option between February & April because March gets removed from the 2nd select list. How would you tackle that?

Don't forget to change the size of the 2 select lists to 4.

Thanks once again,

Regards,

Arpan

 

[mwolf00]

That is a quirky little bug... You can reduce the effects with this....

if (list2.options.length > 0){
list2.selectedIndex = list2.options.length-1
list2.selectedIndex = 0
list2.selectedIndex = -1
}
if (list1.options.length > 0){
list1.selectedIndex = list1.options.length-1
list1.selectedIndex = 0
list1.selectedIndex = -1
}

at the end of the first function, but I was still able to make it happen occasionally...

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

 

[arpan]

My dear friend, I don't have anything other than a big THANK YOU for all your efforts in helping me out (not to forget the stars!!). I think this nagging problem is taking place only in the 1st select list but I think the 2nd list is working perfect without any discrepancy, isn't it? Nevertheless, if you come across a concrete solution to overcome this bug, do let me know. In case, I get one, I will get back to you.

Regards,

Arpan