使用Javascript - 添加橙色曾經在fruitslist下拉列表

<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>

從上面的代碼中，首先我是從下拉列表中選擇橙色，然後點擊>>按鈕，橙色值將fruitslist添加下拉列表。
之後。我再次從下拉列表中選擇橙色，然後單擊>>按鈕，Orange值將再次添加到fruitslist下拉列表中。
但是，我只是希望在fruitslist中添加一個橙色值下拉列表。
我應該如何修改它？有人能幫我嗎？使用Javascript - 添加橙色曾經在fruitslist下拉列表

來源

2016-02-02 KKL Michael

試着改變你的addFruits功能如下：

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); 
      } 
     } 
    } 
}

在這裏做最重要的事情是首先檢查fruitslist不包含被點擊的項目，因此，額外的for循環。

來源

2016-02-02 02:41:03

這是修復程序。

<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>

來源

2016-02-02 02:44:45 Siva

使用Javascript - 添加橙色曾經在fruitslist下拉列表

回答

相關問題