/    Sign up×
Community /Pin to ProfileBookmark

Selected value removed from other multiple select option

Copy linkTweet thisAlerts:
Mar 17.2006

Hi to all,

My problem is I have about 5 select boxes having same value:

<select name=”List1″ >
<option value=””></option>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
</select>

<select name=”List2″ >
<option value=””></option>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
</select>

<select name=”List3″ >
<option value=””></option>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
</select>

<select name=”List4″ >
<option value=””></option>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
</select>

<select name=”List5″ >
<option value=””></option>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
</select>

Now when I select the value 4 from one of the select box then the value “4” should be removed from other select boxes also and same applies to other select boxes, whenever a new value is selected in one select box it shouldn’t be available to other select boxes.

Is there any javascript programming for this?

Any help will be highly appreciated.

Thanks in advance

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@KravvitzMar 17.2006 — Yes, that's possible. I won't do it for you for free though.

Maybe this will help: http://www.quirksmode.org/js/options.html

I'll give you another hint as well. You should run the function to remove the options via the onchange event of each <select> element.
Copy linkTweet thisAlerts:
@boknoyauthorMar 17.2006 — @Kravvitz: Thank you for your reply, but I can't still figure it out on how to make the script work.

Anybody can help me with this?

Thanks
Copy linkTweet thisAlerts:
@James_GatkaMar 17.2006 — [CODE]<html>
<head>
<script type="text/javascript">

var nList = [];

function removeMirror(nForm,currList){

for (i=0; i<nList.length; i++)
{
if (nForm[i] != currList && currList.selectedIndex != 0)
{
nForm[i].removeChild(nForm[i][currList.selectedIndex]);
}
}
currList.removeChild(currList[currList.selectedIndex]);
}

function init(){

var nForm = document.forms[0];
var n = 0;
for (i=0; i<nForm.length; i++)
{
if (nForm[i].type == 'select-one'){nList[n++] = i}
}
}

onload=init;

</script>
</head>
<body>

<form>
<select name="List1" onchange="removeMirror(this.form,this)">
<option value="">Make a selection</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

<select name="List2" onchange="removeMirror(this.form,this)">
<option value="">Make a selection</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

<select name="List3" onchange="removeMirror(this.form,this)">
<option value="">Make a selection</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

<select name="List4" onchange="removeMirror(this.form,this)">
<option value="">Make a selection</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

<select name="List5" onchange="removeMirror(this.form,this)">
<option value="">Make a selection</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>

</body>
</html>[/CODE]
×

Success!

Help @boknoy 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.16,
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,
)...