select 태그에서 선택 및 선택 취소 (토글)

현재 HTML SELECT 태그는 한 가지를 제외하고 나에게 잘 작동합니다. 현재 항목에 대한 토글 링을 구현할 수 있습니까?select 태그에서 선택 및 선택 취소 (토글)

현재 선택되어있는 항목을 다시 클릭하고 "선택 취소"하고 싶습니다. 지금은 그런 식으로 작동하지 않으며 단순히 현재 선택을 "선택"으로 유지합니다.

"현재"선택과 함께 "이전"선택을 알아야하고 2를 비교하여 모든 항목을 "선택 취소"해야하는지 확인해야합니다. 이전 선택을 얻으려면 어떻게해야합니까? 내가 아는 모든 것은 현재 선택 인 "selectedIndex"입니다.

방법이 있습니까?

출처

2009-08-06 Robert4Real

다중 선택 선택 상자입니까? –

나열된 솔루션이 효과가 있습니까? – PortageMonkey

이렇게하려면 다음과 같이 javascript를 약간 사용할 수 있습니다. 테스트를 마쳤으며 요청한대로 작동하는 것 같습니다. 나는 가독성을 위해 자세한 설명을하고 있지만, 일단 당신이 일하면 그것을 청소할 수 있습니다.

<script language="JavaScript" type="text/javascript"> 
    function toggleSelectedValue() { 

     var selObj = document.getElementById('myList'); 
     var selIndex = selObj.selectedIndex; 
     var selValue = selObj.options[selIndex].value; 
     var prevSelValue = document.getElementById('trackSelectedValueHiddenField').value; 

     if (selValue == prevSelValue) { 

      //Delect "all" items 
      selObj.selectedIndex = -1; 
      document.getElementById('trackSelectedValueHiddenField').value = 0; 
     } 
     else {setSelectedValue();} 

    } 
    function setSelectedValue() 
    { 
     var selObj = document.getElementById('myList'); 
     var selIndex = selObj.selectedIndex; 
     document.getElementById('trackSelectedValueHiddenField').value = selObj.options[selIndex].value; 
    } 
    </script> 

</head> 
<body> 
<div id="wrapper"> 
    <div id="contentDiv" style="height:686px; border: solid 1px red;"> 
    <select multiple="multiple" id="myList" onclick="toggleSelectedValue()"> 
     <option value="1">Test</option> 
     <option value="2">Test</option> 
     <option value="3">Test</option> 
    </select> 
    <input type="hidden" id="trackSelectedValueHiddenField" value="0" /> 
    </div> 
</div> 
</body> 
</html>

출처

2009-08-07 03:49:53 PortageMonkey

select 태그에서 선택 및 선택 취소 (토글)

답변

관련 문제