• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 216
  • Last Modified:

Not allow redundant value in the mutiple list box.

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
sitijaafar
Asked:
sitijaafar
  • 2
  • 2
1 Solution
 
sam2912Commented:
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
 
Gurvinder Pal SinghCommented:
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
 
Gurvinder Pal SinghCommented:
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
 
sam2912Commented:

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
 
Michel PlungjanIT ExpertCommented:
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now