<Select> inherits javascript onclick from container and hides options
<p>I am creating an internal web app for my company, I am having issues with a <code>javascript</code> function and <code>onclick</code>. The page in question has a dynamic list generated from a Database return. </p>

<p>The <em>only</em> issue I am having is that I set up an <code>onclick</code> for my list item div containers in which it changes the color to a gray (hover color is the light blue seen below), I recently added a <code>&lt;select&gt;</code> drop down to each list item. I set <code>visibility</code> to <code>hidden</code> for when the item is not selected and <code>visible</code> when selected. </p>

<p>My issue is that when trying to select an option the contents disappear because the onclick function is called.</p>

<p>After the div is clicked on the <code>&lt;Select&gt;</code> shows properly:<br>
<img src="http://i.imgur.com/zenZvv9.png" alt=""></p>

<p>Here is what happens when clicking on the <code>&lt;Select&gt;</code>:<br>
<img src="http://i.imgur.com/RkSsBZC.png" alt=""></p>

<p>Here is my code (Please see comments):</p>

<pre class="lang-php prettyprint-override"><code>// I removed irrelevant styling (floats, don't allow text selection, etc...).
$out .= "&lt;label for='".$i."'&gt;";
$out .= "&lt;div id='".$divId."' class='schListItem'&gt;";
$out .= "&lt;div style='width:25px;'&gt;".$i."&lt;/div&gt;";
// Here is my checkbox and onclick javascript function call
$out .= "&lt;div style='width:25px;'&gt;
        &lt;input type='checkbox' name='index[]' id='".$i."' value='".$index."' onclick='selectDiv(this.id);' &gt;
    &lt;/div&gt;";
$out .= "&lt;div style='width:200px;'&gt;".$loc['name']."&lt;/div&gt;";
$out .= "&lt;div style='width:400PX;'&gt;".$loc['addy1']." ".$loc['city'].", ".$loc['state']." ".$loc['zip']."&lt;/div&gt;";
// I tried ending the label here and then starting it up again after the select. That did not work.
//$out .= "&lt;/label&gt;";

// Here is my added select, the onclick javascript function wraps this element.
// I want to prevent clicking on the dropdown from calling the javascript function.
$out .= "&lt;div name='surveyorDiv' id='".$survDivId."' style='visibility:hidden; width:150px;'&gt;";
$out .= "&lt;select name='surveyor[]' id='surveyorId'&gt;&lt;option value='null' selected='selected'&gt;&lt;/option&gt;";
foreach($surveyor as $user) {
    $out .= "&lt;option value='".$user['name']."'&gt;".$user['name']."&lt;/option&gt;";
}
$out .= "&lt;/select&gt;";
$out .= "&lt;/div&gt;";
// End of Select

//$out .= "&lt;label for='".$i."'&gt;";
$out .= "&lt;div style='width:40px;&gt;".$loc['signs']."&lt;/div&gt;";
$out .= "&lt;/div&gt;&lt;/label&gt;";
</code></pre>

<p>Here is my Javascript long-hand:</p>

<pre class="lang-javascript prettyprint-override"><code>&lt;script language="javascript"&gt;
// Here is my javascript which changes the background color 
// of the primary Div and makes the select visible
function selectDiv(id) {
    var chk = document.getElementById(id);
    divId = parseInt(id) + 1000;
    surDivId = parseInt(id) + 9000;
    var div = document.getElementById(divId.toString());
    var surDiv = document.getElementById(surDivId.toString());
    if (chk.checked) {
        div.style.backgroundColor = '#e4e4e4';
        surDiv.style.visibility = 'visible';
    } else {
        div.style.backgroundColor = '';
        surDiv.style.visibility = 'hidden';
    }
}
&lt;/script&gt;
</code></pre>

<p>In thinking through I tried removing the <code>label</code> wrap, which didn't change anything. I'd rather avoid breaking the primary <code>DIV</code>, so if there is anything I am missing please let me know.</p>
