Javascript - 在水果列表下拉列表中添加一次橙色

标签 javascript html

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

从上面的代码中,首先我从下拉列表中选择 Orange 并单击 >> 按钮,Orange 值将添加到 fruitslist 下拉列表中。
在那之后。我再次从下拉列表中选择 Orange 并单击 >> 按钮,Orange 值将再次添加到 fruitslist 下拉列表中。
但是,我只想在水果列表下拉列表中添加一次橙色值。
我该如何修改呢?有人可以帮助我吗?

最佳答案

这是修复。

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

关于Javascript - 在水果列表下拉列表中添加一次橙色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35143936/

相关文章:

javascript - JavaScript 元素上的 Tabindex

javascript - typescript 对象解构结果为 "Property assignment expected."

javascript - jQuery .focus() 和 .blur() 在 Chrome 或 Safari 中不起作用

javascript - 如何使用 "this"在事件处理程序中获取类变量

php - Ajax 和 PHP 表单 : window still refreshing

html - 当我转到 html 页面中的子菜单时,无法在菜单上保持悬停状态

javascript - 更改:before and :after pseudo-elements?的样式

javascript - 根据_id限制发布限制

javascript - 如何转换字符串h :m to hour format?

html - div 中的水平导航栏