1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 10:25 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

changing in two Multiple select's

multiple select onclick

         

deimon

10:35 am on Jan 4, 2011 (gmt 0)

10+ Year Member



Hello,
i need help about this:

I have two multiple selects, where if i (de)select option.. in this and in second select .. will (de)select all option, with identical value ..

for ex.

php output this : (it can be something selected .. now all values = val1)


------------- 
<select name="first" multiple="multiple" onchange="testuj();">
<option selected="selected" value="val1">opt 1</option>
<option value="val3">opt 3</option>
<option value="val4">opt 4</option>
<option value="val3">opt 3</option>
<option selected="selected" value="val1">opt 1</option>
<option value="val5">opt 5</option>
<option value="val3">opt 3</option>
<option value="ttr07">ttr07</option>
<option value="val6">opt 6</option>
<option value="necojineho">necojineho</option>
<option value="val7">opt 7</option>
<option value="val8">opt 8</option>
<option value="val9">opt 9</option>
<option value="val10">opt 10</option>
<option value="val11">opt 11</option>
<option value="val15">opt 15</option>
<option value="val18">opt 18</option>
</select>

<select name="second" multiple="multiple" onchange="testuj();">
<option value="necojineho">necojineho</option>
<option value="ttr07">ttr07</option>
<option selected="selected" value="val1">opt 1</option>
<option value="val02">opt 02</option>
<option value="val6">opt 6</option>
<option value="val8">opt 8</option>
<option value="necojineho">necojineho</option>
<option value="val9">opt 9</option>
<option value="val10">opt 10</option>
<option value="val11">opt 11</option>
<option value="val15">opt 15</option>
<option selected="selected" value="val1">opt 1</option>
</select>


-------------

i try something .. but im javascript absolutely looser.. but in php it is crap

can you help me please ?

daveVk

7:11 am on Jan 5, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<select name="first" multiple="multiple" onchange="testuj();">


I assume testuj() is sub optimal, please post it's javascript.

deimon

10:33 am on Jan 5, 2011 (gmt 0)

10+ Year Member



Sorry .. 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <meta name="generator" content="PSPad editor, www.pspad.com">
 <title></title>
 <style>
 .ram {margin: 10px; padding: 5px; border: 1px solid #000; width: 200px; float: left; text-align: center;}
 </style>
<script type="text/javascript">
function testuj(prvni,druhy) {
a = document.getElementById(prvni)[0];
b = document.getElementById(druhy)[0];
e = "";
n = 0;
var pole = [];
for(x=0;x<a.length;x++) if(a.options[x].selected == true) pole[n++] = a.options[x].value;
for(x=0;x<b.length;x++)
{
test = 0;
for(y=0;y<pole.length;y++) if(b.options[x].value == pole[y]) test=1;
b.options[x].selected=((test==1)?true:false);
}
}
</script> 
 
 </head>

<body onload="testuj('jedna','dve');">


<div class="ram">
<strong>První select</strong><br />
<select size="20" name="ooo[]" id="jedna" multiple="multiple" onchange="testuj('jedna','dve');">
<option selected="selected" value="val1">opt 1</option>
<option value="val3">opt 3</option>
<option value="val4">opt 4</option>
<option value="val3">opt 3</option>
<option selected="selected" value="val1">opt 1</option>

<option value="val5">opt 5</option>
<option value="val3">opt 3</option>
<option value="ttr07">ttr07</option>
<option value="val6">opt 6</option>
<option value="necojineho">necojineho</option>
<option value="val7">opt 7</option>
<option value="val8">opt 8</option>
<option value="val9">opt 9</option>
<option value="val10">opt 10</option>

<option value="val11">opt 11</option>
<option value="val15">opt 15</option>
<option value="val18">opt 18</option>
</select>
</div>

<div class="ram">
<strong>Druhý select</strong><br />
<select size="20" name="sss[]" id="dve" multiple="multiple" onchange="testuj('dve','jedna');">
<option value="necojineho">necojineho</option>
<option value="ttr07">ttr07</option>

<option selected="selected" value="val1">opt 1</option>
<option value="val02">opt 02</option>
<option value="val6">opt 6</option>
<option value="val8">opt 8</option>
<option value="necojineho">necojineho</option>
<option value="val9">opt 9</option>
<option value="val10">opt 10</option>
<option value="val11">opt 11</option>
<option value="val15">opt 15</option>

<option selected="selected" value="val1">opt 1</option>
</select>
</div>

 </body>
</html>


this code will now not fuctioned .. becouse i was changed getelementby name to id ...

i need if i change something in second select it not de-select on first but in second select .. (if i changed soumething .. in need changed on it in both selects)

daveVk

11:37 am on Jan 5, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



var a = document.getElementById(prvni)[0];
var b = document.getElementById(druhy)[0];

remove red bit, getElementById returns only one.

deimon

2:45 pm on Jan 5, 2011 (gmt 0)

10+ Year Member



thanks ..

now its 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <meta name="generator" content="PSPad editor, www.pspad.com">
 <title></title>
 <style>
 .ram {margin: 10px; padding: 5px; border: 1px solid #000; width: 200px; float: left; text-align: center;}
 </style>
<script type="text/javascript">
function testuj(prvni,druhy) {
var a = document.getElementById(prvni);
var b = document.getElementById(druhy);
e = "";
n = 0;
var pole = [];
for(x=0;x<a.length;x++) if(a.options[x].selected == true) pole[n++] = a.options[x].value;
for(x=0;x<b.length;x++)
{
test = 0;
for(y=0;y<pole.length;y++) if(b.options[x].value == pole[y]) test=1;
b.options[x].selected=((test==1)?true:false);
}
}
</script> 
 
 </head>

<body>


<div class="ram">
<strong>První select</strong><br />
<select size="20" name="ooo[]" id="jedna" multiple="multiple" onchange="testuj('jedna','dve');">
<option selected="selected" value="val1">opt 1</option>
<option value="val3">opt 3</option>
<option value="val4">opt 4</option>
<option value="val3">opt 3</option>
<option selected="selected" value="val1">opt 1</option>

<option value="val5">opt 5</option>
<option value="val3">opt 3</option>
<option value="ttr07">ttr07</option>
<option value="val6">opt 6</option>
<option value="necojineho">necojineho</option>
<option value="val7">opt 7</option>
<option value="val8">opt 8</option>
<option value="val9">opt 9</option>
<option value="val10">opt 10</option>

<option value="val11">opt 11</option>
<option value="val15">opt 15</option>
<option value="val18">opt 18</option>
</select>
</div>

<div class="ram">
<strong>Druhý select</strong><br />
<select size="20" name="sss[]" id="dve" multiple="multiple" onchange="testuj('dve','jedna');">
<option value="necojineho">necojineho</option>
<option value="ttr07">ttr07</option>

<option selected="selected" value="val1">opt 1</option>
<option value="val02">opt 02</option>
<option value="val6">opt 6</option>
<option value="val8">opt 8</option>
<option value="necojineho">necojineho</option>
<option value="val9">opt 9</option>
<option value="val10">opt 10</option>
<option value="val11">opt 11</option>
<option value="val15">opt 15</option>

<option selected="selected" value="val1">opt 1</option>
</select>
</div>

 </body>
</html>


can you try this .. if you select all option in left side .. all without one value is selected in second select ...
if you press ctrl + click on it... it deselect half option in left side :(

do you know why ? .. i need if i click to something .. all values of option in both selects .. is (de)select as clicked option...

if i select all values of first select . .and in second select is some noselected option .. on clcik on this it changed to selected .. so all option in both selects will be selected

:-)

many thanks

deimon

11:06 pm on Jan 5, 2011 (gmt 0)

10+ Year Member



now i change my query .. now its works .. only if i select more options by shift ... its not event onclick .. => its problem

is possible some event.. thats works in this ? if i insert onchange event into select ... there is problem if i select on left select all options .. and i change select in second select .. it not memorize, thats option was selected in first select...

so i need if i click or mark some values.. i need change this values into both selects 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <meta name="generator" content="PSPad editor, www.pspad.com">
 <title></title>
 <style>
 .ram {margin: 10px; padding: 5px; border: 1px solid #000; width: 200px; float: left; text-align: center;}
 </style>
<script type="text/javascript">
function testuj(co, kam) {
var a = document.getElementById(kam);
n = 0;
var pole = [];
for(x=0;x<a.length;x++) { 
if(a.options[x].value == co) {
if(a.options[x].selected == true) a.options[x].selected = false;
else a.options[x].selected = true;
} } }
</script> 
 
 </head>

<body>
<div class="ram">
<strong>První select</strong><br />
<select size="20" name="ooo[]" id="jedna" multiple="multiple">
<option value="val1" onclick="testuj('val1', 'dve');">opt 1</option>
<option value="val2" onclick="testuj('val2', 'dve');">opt 2</option>
<option value="val3" onclick="testuj('val3', 'dve');">opt 3</option>
<option value="val4" onclick="testuj('val4', 'dve');">opt 4</option>
<option value="val5" onclick="testuj('val5', 'dve');">opt 5</option>
<option value="val6" onclick="testuj('val6', 'dve');">opt 6</option>
<option value="ttr07" onclick="testuj('ttr07', 'dve');">ttr07</option>
</select>
</div>

<div class="ram">
<strong>Druhý select</strong><br />
<select size="20" name="sss[]" id="dve" multiple="multiple">
<option value="val1" onclick="testuj('val1', 'jedna');">opt 1</option>
<option value="val2" onclick="testuj('val2', 'jedna');">opt 2</option>
<option value="val3" onclick="testuj('val3', 'jedna');">opt 3</option>
<option value="val4" onclick="testuj('val4', 'jedna');">opt 4</option>
<option value="val5" onclick="testuj('val5', 'jedna');">opt 5</option>
<option value="val6" onclick="testuj('val6', 'jedna');">opt 6</option>
<option value="ttr07" onclick="testuj('ttr07', 'jedna');">ttr07</option>
</select>
</div>

 </body>
</html>

daveVk

5:35 am on Jan 6, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



In some of the examples you use same value for more than one option within the same select.


<select size="20" name="ooo[]" id="jedna" multiple="multiple" onchange="testuj('jedna','dve');">
<option selected="selected" value="val1">opt 1</option>
<option value="val3">opt 3</option>
<option value="val4">opt 4</option>
<option value="val3">opt 3</option>


This will likely cause problems, as only a single select state is held for val3.

Do you need to allow multiples of same option in same list?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 10:25 pm May 13, 2026