ansaurus

Question

implementing select and deselect (toggle) on a SELECT TAG

Answer 1

A:

To accomplish this you might use a little bit of javascript as follows. I have tested and it seems to work as you requested. I am being verbose for readability, but you can clean once you have it working for you.

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

PortageMonkey 2009-08-07 03:49:53

ansaurus

tags:

views:

answers:

implementing select and deselect (toggle) on a SELECT TAG

related questions