如何在弹出窗口中使用javascript将元素从一个下拉列表复制到另一个下拉列表？_Javascript

如何在弹出窗口中使用javascript将元素从一个下拉列表复制到另一个下拉列表？

javascript

如何在弹出窗口中使用javascript将元素从一个下拉列表复制到另一个下拉列表？,javascript,Javascript,我有一个下拉列表和一个按钮。当我点击按钮时，popuplist上会显示一个文本框，旁边是另一个列表和两个按钮。当弹出窗口关闭时，第一个选择列表应在弹出窗口的选择列表中获取所有这些值 popupwindow有两个按钮，一个用于添加到弹出窗口内的选择列表，另一个用于关闭弹出窗口并填充第一个选择列表。此外，当我完成添加到第一个选择lsit后，弹出窗口中的文本框和选择列表应该被清除。我可以添加到弹出窗口内的选择列表中，但无法将列表添加到原始选择列表中。请像我一样帮助我；我不熟悉bootstrap，还是J

我有一个下拉列表和一个按钮。当我点击按钮时，popuplist上会显示一个文本框，旁边是另一个列表和两个按钮。当弹出窗口关闭时，第一个选择列表应在弹出窗口的选择列表中获取所有这些值

popupwindow有两个按钮，一个用于添加到弹出窗口内的选择列表，另一个用于关闭弹出窗口并填充第一个选择列表。此外，当我完成添加到第一个选择lsit后，弹出窗口中的文本框和选择列表应该被清除。我可以添加到弹出窗口内的选择列表中，但无法将列表添加到原始选择列表中。请像我一样帮助我；我不熟悉bootstrap，还是Javascript的新手

    <html lang="en">
<head>
<style type="text/css">
#newcategory{
    width:200px;
}
</style>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form>
<select id="category" multiple size="5" name="category">
    <option value="sports">Sports</option>
    <option value="news">News</option>
    <option value="movies">Movies</option>
  </select>
  <div class="container">
  <!-- Trigger the modal with a button -->
  <button id="addcategory" onclick="addCategory()" type="button"  data-toggle="modal" data-target="#myModal">Add Category</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Add New Category</h4>
        </div>
        <div class="modal-body" >
           <div id="newCategoryWrapper">
        <input type="text" id="newCategoryName" placeholder="New Category name" />
        <select id="newcategory" multiple size="5" name="newcategory" class="newcategory">

  </select>
     </div>
        </div>
       <div class="modal-footer">
          <button type="button" class="btn btn-default"  id="addonecategory" onclick="addoneoption()">Add </button>


          <button type="button" class="btn btn-default" data-dismiss="modal" id="addCategoryButton" onclick="addallOption()">Finish</button>
        </div>
      </div>

    </div>
  </div>

</div>
</form>
<script type="text/javascript">
var category = document.getElementById("category");
var categoryNameInput = document.getElementById("newCategoryName");
var wrapper = document.getElementById("newCategoryWrapper");
wrapper.style.display = "none"; 
var isAddingNewCategory = false;
var newcategory = document.getElementById("newcategory");
function addallOption() {
  var newOption = document.createElement("option");
  newOption.text = newcategory.value;
  category.add(newOption);
  toggleInput();
}

function toggleInput() {
  if (isAddingNewCategory) wrapper.style.display = "none";
  else wrapper.style.display = "block";
  isAddingNewCategory = !isAddingNewCategory;
}

function addCategory(){
categoryNameInput.value = ""; 
  toggleInput(); 
}

var newcategoryNameInput = document.getElementById("newCategoryName");
function addoneoption(){
     var newOption = document.createElement("option");
     newOption.text = categoryNameInput.value;
     newcategory.add(newOption);
}

</script>


</body>
</html>


#新类别{
宽度：200px；
}
引导示例
体育
新闻
影视
添加类别
&时代；
添加新类别
添加
完成
var category=document.getElementById（“category”）；
var categoryNameInput=document.getElementById（“newCategoryName”）；
var wrapper=document.getElementById（“newCategoryWrapper”）；
wrapper.style.display=“无”；
var isAddingNewCategory=false；
var newcategory=document.getElementById（“newcategory”）；
函数addallOption（）{
var newOption=document.createElement（“选项”）；
newOption.text=newcategory.value；
类别。添加（新选项）；
切换输入（）；
}
函数toggleInput（）{
如果（isAddingNewCategory）wrapper.style.display=“无”；
else wrapper.style.display=“block”；
isAddingNewCategory=！isAddingNewCategory；
}
函数addCategory（）{
categoryNameInput.value=“”；
切换输入（）；
}
var newcategoryNameInput=document.getElementById（“newCategoryName”）；
函数addoneoption（）{
var newOption=document.createElement（“选项”）；
newOption.text=categoryNameInput.value；
newcategory.add（newOption）；
}

我对代码应该如何编写有另一个想法

var-car=document.querySelector（“#car”）；
var addArea=document.querySelector（'.addArea'）；
//创建能为我们完成任务的功能
函数add（）{
//获取输入文本值
var inputText=document.querySelector（“#input”）.value；
//检查输入是否为空
如果（inputText==“”）{
警报（'请填写输入！'）；
}否则{
//创建新的选项元素并将其附加到选择区域
var el=document.createElement（'option'）；
var t=document.createTextNode（inputText）；
el.儿童（t）；
el.setAttribute（'value'，inputText.toLowerCase（））；
儿童车（el）；
//隐藏输入
addArea.remove（）；
}
}


Javascript示例
沃尔沃汽车
萨博
欧宝
奥迪
添加

如何编码工作

1）代码中添加了

输入

的包装器和

按钮

，用于向

选择

添加新选项

2）使用

document.getElementById

我获得了

选择

、按钮以及用于添加选项的“编辑器”周围的包装器元素

3）使用

toggleInput

我将

显示设置为隐藏或阻止，具体取决于变量isAddingNewCar
，该变量将切换输入包装，显示或隐藏输入字段和按钮
4） 当输入字段可见时，用户将输入一个名称并按下addCarButton
，这将依次调用addOption
函数，该函数将使用document.createElement
创建一个option
元素，并使用car.add（newOption）
将其添加到元素中。添加选项后，将再次调用方法toggleInput
，以隐藏包装器
注意：脚本
标记必须位于HTML代码下才能运行，但必须位于包装代码的
内。在原始代码中，它位于
标记之外


沃尔沃汽车
萨博
欧宝
奥迪
添加
加车
var car=document.getElementById（“car”）；
var carNameInput=document.getElementById（“newCarName”）；
var wrapper=document.getElementById（“newCarWrapper”）；
wrapper.style.display=“无”//默认隐藏
var isAddingNewCar=假；
函数addOption（）{
var newOption=document.createElement（“选项”）；
newOption.text=carNameInput.value；
car.add（新选项）；
切换输入（）；
}
函数toggleInput（）{
if（isAddingNewCar）wrapper.style.display=“无”；
else wrapper.style.display=“block”；
isAddingNewCar=！isAddingNewCar；
}
函数add（）{
carNameInput.value=”“；//从输入字段中删除旧值。
toggleInput（）；//切换输入和按钮包装的可见性
}
Stackoverflow不是真正的编码服务。你应该首先尝试一下，然后带着一个具体的问题回来。首先，您可以查看W3学校，这些学校应该为您提供进一步发展的方向。@ThomasDarvik您能在这个问题上帮助我吗？如果您不知道引导和JavaScript的工作原理，这是一项相当艰巨的任务。我编写原始代码是为了给您一个前进的方向，但是，我不认为为您编写下一个代码会真正帮助您。首先尝试了解HTML布局和JavaScript是如何工作的。先做一些简单的练习，然后转到更高级的任务：）我还建议将此作为另一个问题提问。如果有人进来看这个，他们会认为我给你的答案是不正确的（这是真的）。保留已批准的问题，在此处保留旧编辑