Welcome to WebmasterWorld Guest from 54.166.224.46

Forum Moderators: open

Message Too Old, No Replies

changing in two Multiple select's

multiple select onclick

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

5+ 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 ?
7:11 am on Jan 5, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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


I assume testuj() is sub optimal, please post it's javascript.
10:33 am on Jan 5, 2011 (gmt 0)

5+ 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)
11:37 am on Jan 5, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

remove red bit, getElementById returns only one.
2:45 pm on Jan 5, 2011 (gmt 0)

5+ 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
11:06 pm on Jan 5, 2011 (gmt 0)

5+ 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>
5:35 am on Jan 6, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ 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?
 

Featured Threads

Hot Threads This Week

Hot Threads This Month