2

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>

これは2番目のリストです。

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

最初のドロップダウンで[毎週]を選択した場合、値は2番目のドロップダウンに保存される必要があります。これを実装するにはどうすればよいですか？

前もって感謝します！！

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>

注：2番目のドロップダウンでは、最初の選択ボックスですべての値を使用できます。

于 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を使用してこの関数を渡します。

デモの場合：リストボックスを左右に移動するオプション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 に答える