css樣式：

*{ margin:0px auto; padding:0px} #xiala{ width:180px; height:33px; border:1px solid #999;text-align:center; line-height:33px; vertical-align:middle; } #xiala:hover{ cursor:pointer}#zi{width:180px; height:150px; border:1px solid #63C; border-top:0px; display:none}.list{width:180px; height:33px; text-align:center; line-height:33px; vertical-align:middle; border-bottom:1px solid #63C; background-color:#CCC} .list:hover{ cursor:pointer; background-color:#63C; color:white}

html代碼：

<div style="width:700px; height:500px; margin-top:30px"><div id="xiala" onclick="Show()"></div> <div id="zi"><div class="list" onclick="Xuan(this)">山東</div><div class="list" onclick="Xuan(this)">淄博</div><div class="list" onclick="Xuan(this)">張店</div></div> </div>

JS代碼：

function Show() {document.getElementById("zi").style.display="block"; } function Xuan(ys) {var v = ys.innerText;document.getElementById("xiala").innerText = v;document.getElementById("zi").style.display="none"; }

?

轉載于:https://www.cnblogs.com/UC0079/p/6412206.html

總結

以上是生活随笔為你收集整理的js简单的下拉选中效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。