js beginner...multiple dropdowns...need help retaining value from unselected dropdown

Greetings,

I've been working on this for days and can not find the solution. Please help!!

I've pasted what I feel is the relevant portion of my code below(hopefully I'm right).

ISSUE: When the user selects a value from one dropdown its value is passed just fine into the show() function, however the value of the other dropdown defaults to the value of the last object in my array. So I need to find a way to retain whatever value has already been highlighted in the other dropdown.

Note: var proponents and var type are both global


function loadMapJSON(json) {

for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    if(entry["gsx$" + param_linesColumn]) {
    var levels = entry["gsx$" + param_levelsColumn].$t;
    var lines = entry["gsx$" + param_linesColumn].$t;
    var lat = parseFloat(entry["gsx$" + param_latColumn].$t);
    var lng = parseFloat(entry["gsx$" + param_lngColumn].$t);
    var point = new GLatLng(lat,lng);

    type = entry["gsx$"+param_typeColumn].$t;
    proponents = entry["gsx$"+ param_proponentsColumn].$t;
     
    }
    }


function CreatePolygon(lines, levels, title, label1, tab1, label2, tab2, label3, tab3, html, type, point, proponents){
var poly = new GPolygon.fromEncoded({
polylines: [
    {points: lines,
    levels: levels,
    color: "#006633",
    opacity: 0.7,
    weight: 3,
    numLevels: 18,
    zoomFactor: 2}],
fill: true,
color: "#00FF33",
opacity: 0.3,
outline: true
});
poly.mytype = type
poly.mytitle = title
poly.mypoint = point
poly.myproponents = proponents

polys.push(poly);
return poly;

}       

    function show(proponents, type) {
 
    for (var i=0; i<polys.length; i++) {
    if ((polys[i].myproponents == proponents) && (polys[i].mytype == type)){
    polys[i].show();
    makeSidebar();
    }
    }
    }
    function hide(type) {
    for (var i=0; i<polys.length; i++) {
    if (polys[i].mytype == type) {
    polys[i].hide();
    }
    }
    }

    function myclick(i) {
    GEvent.trigger(polys[i],"click");
    }


    function hide_all() {
    hide("Park");
    hide("Access");
    hide("Restoration");
    hide("Other")
    hide("Monitoring")
    }

    function toggle_Park() {
    hide_all();
    show(proponents,'Park');
    }    

    function toggle_Access() {
    hide_all();
    show(proponents,'Access');
    }
     
    function toggle_Restoration() {
    hide_all();
    show(proponents, 'Restoration');
    }
    function toggle_Other() {
    hide_all();
    show(proponents,'Other');
    }
    function toggle_All() {
    hide_all();
    show("Park");
    show("Access");
    show("Restoration");
    show("Other")
    show("Monitoring")
    }
    function toggle_MRCA() {
    hide_all();
    show('MRCA', type);
    }
    function toggle_SCC() {
    hide_all();
    show('SCC', type);
    }
//]]>

</script>

<script type="text/javascript">
    function Go (select) {
    var wert = select.options[select.options.selectedIndex].value;
    if (wert == "leer") {
     select.form.reset();
    return;
    } else {
    window.location.href = wert;
    }
    }
</script>



</head>


<body onload="load();" onunload="GUnload();">
       
<table style="border-width:1px; border-color:black; border-style:solid; margin:auto">
    <tr>
    <td> <div id="map" style="width:700px; height:600px;"></div> </td>

    <td valign="top" style="background:#E5E5E5">
    <div style="padding-right:2px; width:240px; height:600px; overflow:auto;">
    <table>
    <tr>
    <td>
   
   <div class="proponent_font">Proponents:</div>
     
    <form action="" id="Ballona" class="dropbox">
       <div style="margin:0px;">
       <select size="1" name="Ballona" onchange="Go(this)" class="dropbox_text">
<option value="leer"  selected="selected">----select----</option>
<option value="javascript:toggle_MRCA();">MRCA</option>
<option value="javascript:toggle_SCC();">SCC</option>
<option  value="leer">--------------</option>
        </select>
      

     
    <div class="titel_font">Type of Project:</div>
     
    <form action="" id="Ballona1" class="dropbox">
       <div style="margin:0px;">
       <select size="1" name="Ballona1" onchange="Go(this)" class="dropbox_text">
           <option value="leer"  selected="selected">----select----</option>
<option value="javascript:toggle_All();">Show All</option>
<option value="javascript:toggle_Park();">Park</option>
<option value="javascript:toggle_Access();">Access</option>
<option value="javascript:toggle_Restoration();">Restoration</option>
<option value="javascript:toggle_Other();">Other</option>
           <option  value="leer">--------------</option>
           
       </select>
       </div>
          </form>
           <div id="Legende" style="spacing:28px"></div>
     
     
    </td>
    </tr>
    </table>
    </div>
    </td>    
    </tr>
</table>

</body>

Code (markup):

Thank you in advance for any assistance.

Log in or Sign up

js beginner...multiple dropdowns...need help retaining value from unselected dropdown

Ivan D Peon

Ivan D Peon

Log in or Sign up

js beginner...multiple dropdowns...need help retaining value from unselected dropdown

Ivan D Peon

Ivan D Peon

Useful Searches