Complex JS onclick events from multiple elements
<p>Ok ( the title may be misleading ) however it is the best i can come up with.</p>

<p>What we want to achieve ?</p>

<p>Ok we have an svg map, of Australia.</p>

<p>On click of a state on that map, the map state changes colour to selected. ( in our case Pink )
At the same time ( a useless button ) which is on page load blank, changes its value to that of the state.
Simultaneously a drop down menu, with the state names in, which on page load has the value , Please Select , changes its value to that of the state.</p>

<p>So : here is what happens.</p>

<p>User visits page and sees map. They also see drop down select box.</p>

<p>They can choose to either click the select dropdown, or click the map.</p>

<p>Scenario 1.
They click the map, and click on the state QUEENSLAND , which has a value of QLD.</p>

<p>On clicking the state, the state changes from grey to <strong>pink</strong>.
The select drop down, changes from Please select, to <strong>Queensland</strong>
The gray button changes from blank to <strong>QLD</strong></p>

<p>Here is an image:
<img src="http://i.stack.imgur.com/48q00.png" alt="enter image description here"></p>

<p>Ok what we have working is.</p>

<p>The map click events work, and propagate the grey button values, so thats all fine.
The select element works, in so far as if we select a state on the map it changes select box value.</p>

<p>What we dont have working is.</p>

<ol>
<li>on click of map, we cannot propagate <strong>BOTH</strong> the select drop down and the gray button values.</li>
<li>we cannot on using the select drop down box, change the "select" state of the map , ie, doesnt change from grey to pink. Also it doesnt change the value of the button from its current value.</li>
</ol>

<p>So here is some code:</p>

<p>Its SVG so here is the wrap element for the map.</p>

<pre><code>&lt;a xlink:href="javascript:void goToOption(document.australia.state,'WA')" target="_top"&gt;
    &lt;path
        id="WA"
        class="territory"
        fill="#a9a9a9"
        onmouseup="clickTerritory(evt)"
        d="m 38.318056,168.24244 c -4.79245,0.99662 -8.64245,1.61598 l -7,1.12612 -8.18526,4.91727 -8.18526,4.91727 -5.31474,-0.0902 c -2.92311,-0.0496 -6.88974,-0.54005 -8.81474,-1.08988 z"/&gt;&lt;/a&gt;
</code></pre>

<p>Here is the JS that controls the map click events:</p>

<pre><code>function prepare(){}
function ready(){
    svgdoc = document.sv.getSVGDocument();
    svgRoot = svgdoc.documentElement;
}
function onTerritoryClick(territory){
    document.getElementById("territory-name").innerHTML=territory;
}

var selected_territory = "None";

  function init(evt) {
    if (window.svgDocument == null)
    {
        svgDocument = evt.target.ownerDocument;
    }
  }

  function clickTerritory(evt) {
    var clicked_territory;

    if (evt.target.parentNode.getAttributeNS(null, "id") != "australia-map")
    {
        // Hack to deal with groups
        clicked_territory = evt.target.parentNode;
    } else {
        clicked_territory = evt.target;
    }

    if (selected_territory != clicked_territory) {
        if (selected_territory != "None") {
            // Unselect previous territory
            selected_territory.setAttributeNS(null, "fill", "#a9a9a9");
        }
        selected_territory = clicked_territory;
        selected_territory.setAttributeNS(null, "fill", "#ec008c");
        top.onTerritoryClick(selected_territory.getAttributeNS(null, "id"));
    } 
  }
</code></pre>

<p>Here is the JS to handle the select box, which fires the href.</p>

<pre><code>function goToOption(sel, val) {
  var opt, o = 0;
  while (opt = sel[o++]) if (opt.value == val) sel.selectedIndex = o - 1;
}
</code></pre>

<p>Here is the button html:</p>

<pre><code>&lt;div class="selected-state left"&gt;
    &lt;button id="territory-name" class="mystate grayNohover button" style="position:absolute;top:250px;left:50px"&gt;ALL&lt;/button&gt; 
&lt;/div&gt;
</code></pre>

<p>Here is the select menu html:</p>

<pre><code>&lt;select name="state" id="speedF" style="width:180px;"&gt;
&lt;option value=""&gt;Please Select&lt;/option&gt;
&lt;option value="QLD"&gt;Queensland&lt;/option&gt;
&lt;option value="NT"&gt;Northern Territory&lt;/option&gt;
&lt;option value="WA"&gt;Western Australia&lt;/option&gt;                           
&lt;option value="SA"&gt;South Australia&lt;/option&gt;
&lt;option value="NSW"&gt;New South Wales&lt;/option&gt;
&lt;option value="VIC"&gt;Victoria&lt;/option&gt;
&lt;option value="ACT"&gt;A.C.T.&lt;/option&gt;
&lt;option value="TAS"&gt;Tasmania&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>sample: <a href="http://sitehelp.com.au/demos/svgmap2/" rel="nofollow">http://sitehelp.com.au/demos/svgmap2/</a></p>

<p>Version 2: <a href="http://dev.30.com.au/422-svg/" rel="nofollow">http://dev.30.com.au/422-svg/</a></p>
