homepage Welcome to WebmasterWorld Guest from 23.22.217.122
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
changing in two Multiple select's
multiple select onclick
deimon




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

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




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

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


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

deimon




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

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




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

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

remove red bit, getElementById returns only one.

deimon




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

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




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

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




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

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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved