/    Sign up×
Community /Pin to ProfileBookmark

two <select> scroll at the same time… ?

Copy linkTweet thisAlerts:
Apr 13.2007

Hello…
I was wondering.. if there is a way to have two “selects” that, when you scroll one, would scroll the other one… as if bound together…

i have this:

[CODE]
<html>
<head>
<script>

function changeToIndex(selIndex){
document.getElementById(‘sel1’).options[selIndex].selected=true;
document.getElementById(‘sel2’).options[selIndex].selected=true;
}
</script>
</head>

<body>
<select id=”sel1″ size=”3″ onclick=”changeToIndex(this.selectedIndex)”>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<select id=”sel2″ size=”3″ onclick=”changeToIndex(this.selectedIndex)”>
<option>Leon</option>
<option>Rodrigo</option>
<option>Ana</option>
<option>Jose</option>
<option>Marco</option>
<option>Luis</option>
</select>
</body>
</html>
[/CODE]

which is simply to have the same selected index on both at the same time…

but is there a way to have them show the same items (index-wise speaking) on both?

thanks in advance.. i hope im clear ?

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@mrhooApr 13.2007 — add this, or a reference to it, to the onchange events of both select elements:
[CODE]function(e){
e=e ? e.target : event.srcElement;
var sel1=document.getElementById('sel1');
var sel2=document.getElementById('sel2');
if(e==sel1)sel2.selectedIndex=sel1.selectedIndex;
else sel1.selectedIndex=sel2.selectedIndex;
return true;
}[/CODE]
Copy linkTweet thisAlerts:
@Leon945authorApr 13.2007 — add this, or a reference to it, to the onchange events of both select elements[/QUOTE]

sorry... how do i go about doing that?

i've never really messed with events..
Copy linkTweet thisAlerts:
@mrhooApr 13.2007 — You can save this function in a file or put it in the head of an html (not xhtml) page.

[CODE]
<script type="text/javascript">
if(window.addEventListener!=undefined||window.attachEvent!=undefined){
function addEvent(hoo,wot,fun){
if(hoo.attachEvent) hoo.attachEvent('on'+ wot,fun);
else if(hoo.addEventListener) hoo.addEventListener(wot,fun,false);
}
window.onload=function(){
var fun= function(e){
e=e ? e.target : event.srcElement;
var sel1=document.getElementById('sel1');
var sel2=document.getElementById('sel2');
if(e==sel1)sel2.selectedIndex=sel1.selectedIndex;
else sel1.selectedIndex=sel2.selectedIndex;
return true;
}
addEvent(document.getElementById('sel1'),'change',fun);
addEvent(document.getElementById('sel2'),'change',fun);
}
}
</script>
[/CODE]
Copy linkTweet thisAlerts:
@samanyoluApr 14.2007 — 
&lt;script type="text/javascript"&gt;
function sameOption (t){
var el1 = document.getElementById('sel1');
var el2 = document.getElementById('sel2');

if(t === el1) { el2.options[t.selectedIndex].selected = true }
if(t === el2) { el1.options[t.selectedIndex].selected = true }

}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;select id="sel1" size="3" onclick="sameOption (this)" &gt;
&lt;option&gt;1&lt;/option&gt;
&lt;option&gt;2&lt;/option&gt;
&lt;option&gt;3&lt;/option&gt;
&lt;option&gt;4&lt;/option&gt;
&lt;option&gt;5&lt;/option&gt;
&lt;option&gt;6&lt;/option&gt;
&lt;/select&gt;
&lt;select id="sel2" size="3" onclick="sameOption (this)"&gt;
&lt;option&gt;Leon&lt;/option&gt;
&lt;option&gt;Rodrigo&lt;/option&gt;
&lt;option&gt;Ana&lt;/option&gt;
&lt;option&gt;Jose&lt;/option&gt;
&lt;option&gt;Marco&lt;/option&gt;
&lt;option&gt;Luis&lt;/option&gt;
&lt;/select&gt;
&lt;/body&gt;
Copy linkTweet thisAlerts:
@Logic_AliApr 14.2007 — You could make it a little more versatile. Assumes all selects will be same length, as it hasn't been specified what should happen otherwise.
[CODE]<body>

<script type="text/javascript">
function sameOption()
{
for(var i=1, masterIdx=arguments[0].selectedIndex; i<arguments.length; i++)
arguments[i].selectedIndex=masterIdx;
}
</script>

<form>
<select name="sel1" size=6 onchange="sameOption(this, this.form.sel2, this.form.sel3)" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<select name="sel2" size=6 onchange="sameOption(this, this.form.sel1, this.form.sel3)">
<option>Leon</option>
<option>Rodrigo</option>
<option>Ana</option>
<option>Jose</option>
<option>Marco</option>
<option>Luis</option>
</select>
<select name="sel3" size=6 onchange="sameOption(this, this.form.sel1, this.form.sel2)">
<option>Plumber</option>
<option>Butcher</option>
<option>Designer</option>
<option>Architect</option>
<option>News Vendor</option>
<option>CEO</option>
</select>
</form>
</body>
[/CODE]
Copy linkTweet thisAlerts:
@samanyoluApr 18.2007 — The browser is an old one (for example Internet Explorer 4, etc).

Will arguments[i] work?
Copy linkTweet thisAlerts:
@Leon945authorApr 18.2007 — ?

thanks for all your suggestions...

all of them seem to work ok..

it has certainly helped me see the different ways to solve this..

thanks!
×

Success!

Help @Leon945 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...