2

我有 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">

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

提前致谢！！

4

5 回答 5

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 选择框中删除选定的选项（如果不需要，请删除该行）

于 2012-12-17T09:16:10.867 回答
0

尝试这个..

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

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

于 2012-12-17T09:09:20.640 回答
0

首先，在onChange事件中调用 javascript 函数时，将getSelected(value)替换为getSelected(this.value)。

现在在那之后，

您的 javascript 函数getSelected(value)应如下所示

function getSelected(value)
{
     document.getElementById("selectedWeek").innerHTML = '<option value="'+value+'">'+value+'</option>';
}
于 2012-12-17T09:10:19.890 回答
0

您可以使用 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 传递此函数。

For Demo: Listbox move left-right options JavaScript

于 2012-12-17T09:03:49.540 回答
-1

您可以使用以下内容，而无需任何 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">
于 2012-12-17T09:13:50.177 回答