Stack Exchange
Javascript - added Orange once in fruitslist drop down list
<html>
<head>
<script>
function addfruits()
{
    for(i = 0; i < document.getElementById("fruits").options.length; i++)
    {
        if(document.getElementById("fruits").options[i].selected)
        {
            var fruitslist = document.getElementById("fruitslist");
            var option = document.createElement("option");
            option.text = document.getElementById("fruits").options[i].text;
            fruitslist.add(option);
        }
    } 
}
</script>
</head>

<body>
<select id="fruits" name="fruits[]" multiple>
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="pear">Pear</option>
    <option value="grape">Grape</option>
</select>

<input type="submit" name="submit" value=">>" onclick="addfruits()" />

<select id="fruitslist" name="fruitslist[]" style="width: 70px;" multiple>
</select>
</body>
</html>

From above code, first I select Orange from drop down list and click >> button, the Orange value will added in fruitslist drop down list. After that. I select Orange again from drop down list and click >> button, the Orange value will added again in fruitslist drop down list. However, I just want the Orange value added in fruitslist drop down list once.  How should I modify it? Can someone help me?

Try changing your addFruits function to the following:
function addfruits()
{
    for (var i = 0; i < document.getElementById("fruits").options.length; i++)
    {
        if (document.getElementById("fruits").options[i].selected)
        {
            var optionText = document.getElementById("fruits").options[i].text;                
            var fruitslist = document.getElementById("fruitslist");                
            var found = false;

            //Does the item clicked on already exist in the destination list?
            for (var j = 0; j < fruitslist.length; j++) {
                if (fruitslist[j].text == optionText) {
                    found = true;
                    break;
                }
            }

            //If the item does not exist, add it to the list.
            if (!found) {
                var option = document.createElement("option");
                option.text = optionText;                
                fruitslist.add(option);
            }
        }
    } 
}

The important thing to do here is first check that the fruitslist does not contain the item that was clicked on, hence that additional for-loop.

Here is the fix.


<html>
<head>
<script>
function addfruits()
{
    for(i = 0; i < document.getElementById("fruits").options.length; i++)
    {
        if(document.getElementById("fruits").options[i].selected && !isAddedAlready(document.getElementById("fruits").options[i].text))
        {
            var fruitslist = document.getElementById("fruitslist");
            var option = document.createElement("option");
            option.text = document.getElementById("fruits").options[i].text;
            fruitslist.add(option);
        }
    } 
}

function isAddedAlready(text) {
  var fruitslist = document.getElementById("fruitslist");
  if(fruitslist.length ==0) return false;
  
  for(var i=0; i<fruitslist.length; i++) {
    if(fruitslist.options[i].text === text) return true;
  }
  return false;
}

</script>
</head>

<body>
<select id="fruits" name="fruits[]" multiple>
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="pear">Pear</option>
    <option value="grape">Grape</option>
</select>

<input type="submit" name="submit" value=">>" onclick="addfruits()" />

<select id="fruitslist" name="fruitslist[]" style="width: 70px;" multiple>
</select>
</body>
</html>



