I am creating an internal web app for my company, I am having issues with a javascript function and onclick. The page in question has a dynamic list generated from a Database return.

The only issue I am having is that I set up an onclick 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 <select> drop down to each list item. I set visibility to hidden for when the item is not selected and visible when selected.

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

After the div is clicked on the <Select> shows properly:

Here is what happens when clicking on the <Select>:

Here is my code (Please see comments):

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

// 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 .= "<div name='surveyorDiv' id='".$survDivId."' style='visibility:hidden; width:150px;'>";
$out .= "<select name='surveyor[]' id='surveyorId'><option value='null' selected='selected'></option>";
foreach($surveyor as $user) {
    $out .= "<option value='".$user['name']."'>".$user['name']."</option>";
}
$out .= "</select>";
$out .= "</div>";
// End of Select

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

Here is my Javascript long-hand:

<script language="javascript">
// 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';
    }
}
</script>

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