Question

我有2个下拉列表，在第一个下拉列表中我有一些数据，如果我选择数据，它必须存储到第二个下拉列表中。这是代码： -

这是第一个下拉列表，

<select name="weekId" id="weekId" onchange="getSelected(value)">
   <option value="Select">Select</option>
   <option value="Weekly">Weekly</option>
   <option value="Monthly">Monthly</option>
   <option value="Both">Both</option>
</select>

这是第二个清单，

<select id="selectedWeek" name="selectedWeek" size="5" multiple="multiple">

如果我在第一个下拉列表中选择每周，则该值必须存储在第二个下拉列表中。我该如何实施呢？

提前致谢!!

Answer 1

var weekId = document.getElementById('weekId')
  , selectedWeek = document.getElementById('selectedWeek')
  , option;

weekId.onchange = function() { 
  option = document.createElement('option');
  option.value = this.value;
  option.text = this.options[this.selectedIndex].text;
  selectedWeek.appendChild(option);
  weekId.removeChild(this.options[this.selectedIndex]);  
};

在此处查看工作小提琴：http://jsfiddle.net/bKrFK/1/

事件处理程序中的最后一行将从weekId选择框中删除所选选项（如果不需要则删除该行）

Answer 2

您可以使用Javascript：

执行此操作

function listbox_moveacross(sourceID, destID) {
    var src = document.getElementById(sourceID);
    var dest = document.getElementById(destID);

    for(var count=0; count < src.options.length; count++) {

        if(src.options[count].selected == true) {
                var option = src.options[count];

                var newOption = document.createElement("option");
                newOption.value = option.value;
                newOption.text = option.text;
                newOption.selected = true;
                try {
                         dest.add(newOption, null); //Standard
                         src.remove(count, null);
                 }catch(error) {
                         dest.add(newOption); // IE only
                         src.remove(count);
                 }
                count--;
        }
    }
}

使用选择框的ID传递此功能。

演示：Listbox move left-right options JavaScript

Answer 3

试试这个..

<html>
<body>
<select name="weekId" id="weekId" onchange="document.getElementById('selectedWeek').value=this.value">
   <option value="Select">Select</option>
   <option value="Weekly">Weekly</option>
   <option value="Monthly">Monthly</option>
   <option value="Both">Both</option>
</select>
<select id="selectedWeek" name="selectedWeek" size="5" multiple="multiple">

<option value="Select">Select</option>
   <option value="Weekly">Weekly</option>
   <option value="Monthly">Monthly</option>
   <option value="Both">Both</option>
 </select>
</body>
</html>

注意：第二个下拉列表在第一个选择框中显示所有值。

Answer 4

首先，当您在 onChange 事件中调用javascript函数时，将 getSelected（value）替换为 getSelected（this.value）

此后，

您的javascript函数 getSelected（value）应该如下所示

function getSelected(value)
{
     document.getElementById("selectedWeek").innerHTML = '<option value="'+value+'">'+value+'</option>';
}

Answer 5

您可以使用以下内容，而不需要任何jQuery依赖项。我添加了一些评论来解释发生了什么。

<script>
    function handleSelection(weekDropDown) {
            // Get selected value
        var selection = weekDropDown.options[weekDropDown.selectedIndex].value;

        var selectedWeekDropDown = document.getElementById("selectedWeek");

        var opt;
        if(selectedWeekDropDown.options[0]) {
            // Replace
            opt = selectedWeekDropDown.options[0];
        } else {
            // Add an option
            opt = document.createElement("option");
        }

        if(!selectedWeekDropDown.options[0]) {
            selectedWeekDropDown.options.add(opt);
        }

        // Set the option text and value
        opt.text = selection;
        opt.value = selection;

    }
</script>

<select name="weekId" id="weekId" onchange="handleSelection(this)">
     <option value="Select">Select</option>
     <option value="Weekly">Weekly</option>
     <option value="Monthly">Monthly</option>
     <option value="Both">Both</option>
</select>

<select id="selectedWeek" name="selectedWeek" size="5" multiple="multiple">

如何将值从一个下拉列表存储到另一个下拉列表

5 个答案: