하나의 드롭 다운 목록에서 다른 드롭 다운 목록으로 값을 저장하는 방법

두 번째 드롭 다운 목록에서 첫 번째 드롭 다운 목록에 데이터가 있고 두 번째 드롭 다운 목록에 데이터를 저장해야합니다. 내가 처음 드롭 다운에 매주를 선택하는 경우하나의 드롭 다운 목록에서 다른 드롭 다운 목록으로 값을 저장하는 방법

이 첫 번째 드롭 다운 목록,

<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

당신이 사용하는 자바 스크립트 작업을 수행 할 수 있습니다

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

출처

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>

참고 : 둘째 드롭 다운 첫 번째 선택 상자에서 사용할 수있는 모든 가치가있다. 당신이 의 onChange 이벤트에서 자바 스크립트 함수를 호출 할 때 모든

출처

2012-12-17 09:09:20 Dhinakar

첫째, 통해 getSelected통해 getSelected (this.value)로 (값)를 대체합니다.

지금 그 후,

귀하의 자바 스크립트 함수 통해 getSelected (값)는 jQuery를 의존하지 않고, 당신은 다음을 사용할 수있는이

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

출처

2012-12-17 09:10:19

-1

처럼 보일 것입니다. 나는 무슨 일이 일어나고 있는지 설명하기 위해 몇 가지 코멘트를 추가했습니다.

<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

하나의 드롭 다운 목록에서 다른 드롭 다운 목록으로 값을 저장하는 방법

답변

관련 문제