<Select>從容器繼承javascript onclick並隱藏選項

我正在爲我的公司創建內部Web應用程序，我遇到javascript函數和onclick問題。有問題的頁面有一個從數據庫返回生成的動態列表。<Select>從容器繼承javascript onclick並隱藏選項

我遇到的唯一問題是，我建立了我的列表項的div容器的onclick在它的顏色將變爲灰色（懸停顏色是下面看到淡藍色的），我最近增加了一個<select>下拉到每個列表項目。我設置visibility爲hidden，當時沒有選擇該項目，選擇visible。

我的問題是，當試圖選擇一個選項的內容消失，因爲onclick函數被調用。

股利被點擊了<Select>後顯示正常：

這裏是關於<Select>點擊時會發生什麼：

這裏是我的代碼（請參見注釋）：

// 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>";

這是我的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>

在通過我想試圖消除label包裹，這並沒有改變任何東西。我寧願避免打破主要DIV，所以如果有什麼我想念，請讓我知道。

來源

2013-02-19 jnthnjns

嗯......試過類似的東西'的onClick =「event.preventDefault（）;」 '？如果我得到你的權利，雖然.. – vikingmaster 2013-02-19 16:23:37

@Jari在所有瀏覽器中完美工作。謝謝！請作爲答覆發佈，我會接受。 – jnthnjns 2013-02-19 16:28:07

太棒了:) – vikingmaster 2013-02-19 16:31:46

我認爲對於防止默認行爲的解決辦法是：

onClick=" event.preventDefault() ;"

事件這裏作爲參數成函數傳遞。

在IE 8和其他一些人可能會出現一些問題，所以最適合的選擇是：

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

來源

2013-02-19 16:30:44 vikingmaster

關於你編輯引用IE的潛在問題，在你的建議之後，我研究了'event.preventDefault（）'，並且我讀了關於這個[這裏]（http://stackoverflow.com/q/1000597/1134705）。感謝您的補充，我現在已經適應了這一點。 – jnthnjns 2013-02-19 16:41:17

你需要做的是停止事件冒泡dom。您可以在右邊的事件處理中使用event.stopPropagation()（點擊一個選項？）。

要得到更詳細的答案，您將不得不張貼的HTML和所有的JavaScript。據我所知，php在這裏並不相關。

來源

2013-02-19 16:24:42 jeroen

感謝您的建議。我確實嘗試過'event.stopPropagation（）'，它的表現相同。再次感謝 – jnthnjns 2013-02-19 16:36:18

<Select>從容器繼承javascript onclick並隱藏選項

回答

相關問題