<select>从容器继承javascript onclick并隐藏选项</select>

Question

我正在为我的公司创建一个内部网络应用，我遇到了javascript功能和onclick的问题。有问题的页面具有从数据库返回生成的动态列表。

我遇到的唯一问题是我为列表项div容器设置了onclick，其中颜色变为灰色（悬停颜色为浅蓝色）我最近在每个列表项中添加了<select>下拉列表。我将visibility设置为hidden，以便在未选中项目时将visible设置为<Select>。

我的问题是，当尝试选择一个选项时，内容会因为调用onclick函数而消失。

在<Select>正确点击div后：

点击// 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>"; 时会发生以下情况：

这是我的代码（请参阅评论）：

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

这是我的Javascript长手：

label

在思考时，我尝试删除DIV换行，但没有改变任何东西。我宁愿避免打破主{{1}}，所以如果有什么我不知道的，请告诉我。

Answer 1

我认为防止默认行为的解决方案是：

onClick=" event.preventDefault() ;"

此处的事件作为参数传递给函数。

在IE 8和其他一些版本中可能存在一些问题，因此最兼容的选项是：

if (event.preventDefault)
  event.preventDefault();
else
  event.returnValue = false ;

Answer 2

你需要做的是阻止事件冒泡dom。您可以在正确的事件处理中使用event.stopPropagation()来执行此操作（单击选项？）。

要获得更详细的答案，您必须发布html和所有javascript。就我所见，php在这里并不重要。