如何將值從一個下拉列表存儲到另一個下拉列表中

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

如果我在第一個下拉列表中選擇週刊值有存儲在第二個下拉列表中。我如何去實現這個？

在此先感謝！

來源

2012-12-17 madhu

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-17 09:16:10 hereandnow78

謝謝！有效！！！ – madhu

爲此，您可以使用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--; 
     } 
    } 
}

通過此功能與您的選擇框的IDS。

對於演示：Listbox move left-right options JavaScript

來源

2012-12-17 09:03:49

試試這個..

<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-17 09:09:20 Dhinakar

首先，當你調用的onChange事件的JavaScript功能，更換getSelected（值）到getSelected（THIS.VALUE）。

現在在這之後，

你的JavaScript函數getSelected（值）應該是這樣

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

來源

2012-12-17 09:10:19

-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-17 09:13:50 tdegrunt

內聯事件處理程序幾乎沒有完成... – hereandnow78

只是嘗試使用TS給我的代碼。事實上，最好不要使用內聯事件處理程序。 – tdegrunt

如何將值從一個下拉列表存儲到另一個下拉列表中

回答

相關問題