Solved

Not allow redundant value in the mutiple list box.

Posted on 2010-09-22
5
206 Views
Last Modified: 2012-05-10
Hi experts,
In the multiple list box, I can add a value into it.  But the problem is how to make sure it not add the redundant value. Below is the code for add, but it accept duplicate value.
function addCountry(){

var elSel = document.getElementById("learnCountry1");
var elSel2 = document.getElementById("learnCountry2");
var alrmsg;
var boolFlag=false;
var country;


 if(elSel2.options[0].selected==true)
  {
	alrmsg="<%=ScriptAlert("Please select a country to add.")%>";
		alert(alrmsg);
  }
  else{
  boolFlag=true;
  var elOptNew = document.createElement('option');
  elOptNew.text = document.frm.learnCountry2.value;
  elOptNew.value = document.frm.learnCountry2.value;
  
if(document.frm.learnCountry.value.length == 0)
  {
  country=document.frm.learnCountry2.value;
  }
  else{
  country=document.frm.learnCountry.value+','+document.frm.learnCountry2.value;
  }
  document.frm.learnCountry.value=country;
  
  try {
    elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
	
  }
  catch(ex) {
    elSel.add(elOptNew); // IE only
  } 

}

Open in new window

0
Comment
Question by:sitijaafar
  • 2
  • 2
5 Comments
 
LVL 14

Accepted Solution

by:
sam2912 earned 500 total points
Comment Utility
You will need to loop through all options in the target select field and check if the options already exist.
var exists = false;
for(i=0; i<elSel.options.length; i++) {
   if(elSel.options[i].value == country) {
      exists = true;
   }
}

if(!exists) {
   try {
      elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
   }
   catch(ex) {
      elSel.add(elOptNew); // IE only
   }
}

Open in new window

0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
check this test page
<html>
<head>
<script type="text/javascript">
var allOptionValues = new Array();
function getDistinctOptions()
{
    var alloptions = document.getElementById("mySelect").options;
    for (i=0;i<alloptions.length;i++)
    {
	  // alert(allOptionValues.indexOf(alloptions[i].value));
       if (allOptionValues.indexOf(alloptions[i].value) == -1)
       {
             allOptionValues[ allOptionValues.length ] =  alloptions[i].value;
       }
    }

    alert("distinct options are: " + allOptionValues.join(",") );
}

if(!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(needle) {
        for(var i = 0; i < this.length; i++) {
            if(this[i] === needle) {
                return i;
            }
        }
        return -1;
    };
}
</script>
</head>
<body>

<form>
Select your favorite fruit:
<select id="mySelect">
  <option value="Apple">Apple</option>
  <option value="Apple">Apple</option>
  <option value="Orange">Orange</option>
  <option value="Pineapple">Pineapple</option>
  <option value="Banana">Banana</option>
</select>
<br /><br />
<input type="button" onclick="getDistinctOptions()" value="Output all options">
</form>
</body>
</html>

Open in new window

0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
i have taken this approach since from your previous questions i knew that you are taking the value from select box setting it in a hidden field and then submitting it.

you can also just check it before adding, as @sam2912 is suggesting
0
 
LVL 14

Expert Comment

by:sam2912
Comment Utility

function addCountry() {
   var elSel = document.getElementById("learnCountry1");
   var elSel2 = document.getElementById("learnCountry2");
   var alrmsg, country, boolFlag = false;

   if (elSel2.options[0].selected == true) {
      alrmsg = "<%=ScriptAlert("Please select a country to add.")%>";
      alert(alrmsg);
   }
   else {
      boolFlag = true;
      var elOptNew = document.createElement('option');
      elOptNew.text = elSel2.value;
      elOptNew.value = elSel2.value;
      if (elSel.value.length == 0) {
         country = elSel2.value;
      }
      else {
         country = elSel.value + ',' + elSel2.value;
      }
      elSel.value = country;
      
      var exists = false;
      for (i = 0; i < elSel.options.length; i++) {
         if (elSel.options[i].value == country) {
            exists = true;
         }
      }
      if (!exists) {
         try {
            elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
         }
         catch (ex) {
            elSel.add(elOptNew); // IE only
         }
      }
   }
}

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Something like this?

(Would  help to see the html and then onChange)

You need to call it with
onClick="addCountry(this.form)"

I took the liberty to change the code to only use forms access. It is not good practice to mix DOM and forms access.
Also my code needs the fields to all have name="..." instead or as well as id="..."

<script>

function addCountry(theForm){

  var elSel  = theForm.learnCountry1;

  var elSel2 = theForm.learnCountry2;

  var alrmsg;

  var boolFlag=false;

  var country;



  if(elSel2.selectedIndex <1) { // nothing selected

	  alrmsg="Please select a country to add.";

		alert(alrmsg);

  }

  else{

    boolFlag=true;

    var val = theForm.learnCountry2.value;

    for (var i=0;i<elSel.options.length;i++) {

      if (val == elSel.options[i].value) return; // already there

    }

    country = theForm.learnCountry.value;

    theForm.learnCountry.value = country+((country.length==0)?",":"")+val

    elSel.options[elSel.options.length] = new Option(val,val)

}

</script>

Open in new window

0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now