By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,299 Members | 1,071 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,299 IT Pros & Developers. It's quick & easy.

Dont allow duplicate values in a dynamic div

P: 10
I am selecting multiple items from a selectbox and on click of a button adding them dynamically to a <div>.
I am adding it as children to the div ...something like checkbox + <selecteditem>.

Next time when the user selects an option which he already added in the div, he should not be allowed to do so.
how can i achieve this? a string match or how ? please send the code

below is my code...



[HTML]<html>
<head>
<base/>
<link rel="stylesheet" type="text/css" href="includes/css/vzsmb_popup_2008.css" />

<script language="JavaScript">

function addFromAddressBook()
{
var addrList = document.getElementById("names");
var options = new Object();
for(var j=0;j<addrList.options.length;j++)
{
if(addrList.options[j].selected)
{
var i = parseInt(document.getElementById( "iCheckboxes" ).value);
var cb = document.createElement( "input" );

cb.type = 'checkbox';
cb.id = "id" + i;
cb.name = "chkName" + i;
cb.value = "test" + i;

var text = document.createTextNode(addrList.options[j].text);
document.getElementById( 'participantDiv' ).appendChild( cb );

document.getElementById( 'participantDiv' ).appendChild( text) ;
cb.setAttribute('checked',true);



document.getElementById( "iCheckboxes" ).value = parseInt(document.getElementById( "iCheckboxes" ).value) + 1;

}
}
}


</script>
<body>
<form>
<div id="participantDiv" style="height:300px; overflow:auto; border:1px solid #CCC;font-size:9pt;" >



</div>


<input type="hidden" value="1" name="iCheckboxes" id="iCheckboxes">

<div style="height:150px; overflow-y: scroll;padding-left:10px;">
<select id="names" multiple="true" size="5" style="width:375px">
<option value="jam">jam@gmail.com</option>
<option value="kany">kany (keny@verizon.com)</option>
<option value="amy">amy (amy@verizon.com)</option>
<option value="aashi">aish (aish@gmail.com)</option>
<option value="jason">Jason (Jasom@gmail.com)</option>
<option value="Alice">Alice(Alice@gmail.com)</option>
<option value="Emily">Emily(Am@gmail.com)</option>
<option value="Rita">Rita(rita@gmail.com)</option>
<option value="Shiela">Shiela(ma@gmail.com)</option>
<option value="Noni">Noni(nonu@gmail.com)</option>
</select>

<input type="button" value="AddFromSelect" onclick="addFromAddressBook()">


</div>
</form>[/HTML]
Sep 17 '08 #1
Share this Question
Share on Google+
7 Replies


acoder
Expert Mod 15k+
P: 16,027
The simple solution would be to remove the selected options each time.

PS. please use code tags when posting code.
Sep 17 '08 #2

P: 10
I need to check if the selected item is already available in the div and then not allow the user to add it again...any suggestions on how to proceed ?
Sep 18 '08 #3

acoder
Expert Mod 15k+
P: 16,027
I know, but I suggested a very simple solution to the problem.

Remove the options that have been selected as you create the items, so that the user can now no longer selected them.
Sep 18 '08 #4

P: 10
I need to keep the options ..it should be a copy of what I am selecting ....removing the selected items is not what I want
Sep 18 '08 #5

acoder
Expert Mod 15k+
P: 16,027
Ok, then keep an array of the items already selected. In the addFromAddressBook() function, check that none of the currently selected items are in the array. If they are, don't allow the user to add the selection. If validation passes and the items are added, add these newly selected options to the array.
Sep 18 '08 #6

P: 10
Ok, then keep an array of the items already selected. In the addFromAddressBook() function, check that none of the currently selected items are in the array. If they are, don't allow the user to add the selection. If validation passes and the items are added, add these newly selected options to the array.
The solution works partially....it fails when I try to delete the selected items in the div . The items gets removed but when I try to add them back from the selectbox they dont get added 'cos I am maintaining a list of already selected items in the array.
Please suggestions needed
Sep 23 '08 #7

acoder
Expert Mod 15k+
P: 16,027
You'd need to remove them from the array too when deleting.
Sep 24 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.