台灣最大程式設計社群網站
線上人數
1216
 
會員總數:243278
討論主題:188067
歡迎您免費加入會員
討論區列表 >> CSS/HTML5/Bootstarp >> onchange相關應用問題
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
onchange相關應用問題
價值 : 10 QP  點閱數:197 回應數:14

樓主

883065
門外漢
0 2
38 9
發送站內信


我是一個完全的初學者
目前想嘗試做一個 依性別 男女 切換時
興趣的選項會跟著 消失/顯示 同時 有文字背景顏色

樣式如下
1. 初始預設畫面 (選項選為空白時)
性 別: 空白
          


興趣: 拳擊 網球
芭蕾舞 聽歌 閱讀

2. 男 (芭蕾舞的選項消失 / 拳擊的文字背景為藍色)
性 別: 男
          


興趣: 拳擊 網球
聽歌 閱讀

3. 女 (拳擊的選項消失 / 芭蕾舞文字背景顏色為紅色)
性 別: 女
          


興趣: 網球
芭蕾舞 聽歌 閱讀

以下是我嘗試寫的代碼 (目前只做到興趣的顯示切換而已 文字背景顏色不知道要如何加進去 )
格式一直會跑掉 所以使用相當多不必要的符號
請各位能夠不吝幫我修改一下 謝謝


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
function change(stype){
switch(stype){

case " ":
document.getElementById("L1").style.display="";
document.getElementById("L2").style.display="";
document.getElementById("L3").style.display="";
document.getElementById("L4").style.display="";
document.getElementById("L5").style.display="";
break;
case "男":
document.getElementById("L1").style.display="";
document.getElementById("L2").style.display="";
document.getElementById("L3").style.display="none";
document.getElementById("L4").style.display="";
document.getElementById("L5").style.display="";
break;
case "女":
document.getElementById("L1").style.display="none";
document.getElementById("L2").style.display="";
document.getElementById("L3").style.display="";
document.getElementById("L4").style.display="";
document.getElementById("L5").style.display="";
break;
}
}
</script>
</head>
<body>

 
性 別: <select id="sel" name="sel" onchange="change(this.value);">   
<option value=" "> </option>
<option value="男">男</option>
<option value="女">女</option></select></td>   
					                                              
<table>	

			興趣:  	  <tr> <style="display:none id="L1"><input type="checkbox"  value="拳擊"/> 拳擊</tr>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tr><input type="checkbox" value="網球" id="L2" /> 網球
</tr>
			  
<tr>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<style="display:none id="L3"><input type="checkbox"  value="芭蕾舞"/> 芭蕾舞</tr>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" value="聽歌" id="L4" /> 聽歌          <input type="checkbox" " value="閱讀" id="L5" />  閱讀


</table>

<table>
<tr>
<td bgcolor="blue">選男生 拳擊背景色為藍色</td>
  <td bgcolor="red"> 選女生 芭蕾舞背景色為紅色</td>
 
</tr>
</table>
</body>

</html>



搜尋相關Tags的文章: [ onchange ] ,
本篇文章發表於2018-08-24 01:15
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
最有價值解答

彩虹
檢舉此回應
你可以搭配


更多 style 屬性,你可以從這邊參考
https://www.w3schools.com/jsref/dom_obj_style.asp

等你先懂基礎的部分後,可以改用 class 來做會更好
本篇文章回覆於2018-08-24 10:05
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
作者回應

883065
檢舉此回應
感謝彩虹的答覆
原來是我想得太過複雜了

想請教一下 我想讓畫面整齊對正
但是格式會一直亂跳動 所以我用了很多&nbsp;來對齊

以我的程式碼要怎麼修改 才能避免使用太多不必代碼呢?
本篇文章回覆於2018-08-24 15:04
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
作者回應

883065
檢舉此回應
此外 元代碼我修正了這2項

case "男":
document.getElementById("L1").style.backgroundColor="blue";

case "女":
document.getElementById("L3").style.backgroundColor="red";


發現一個問題
如果是在初始畫面下 直接選男 或直接選女 顯示都正確
只是格是跑掉而已 如下圖

初始畫面


直接選男


直接選女
https://imageshack.com/a/img923/2354/bl9AAy.jpg

------------------------------------------------------------------------------------
但是 直樣不斷更換選項 顯示就會出異常
ex:選完選男 → 選女 變成 拳擊 和 芭蕾舞 項目消失了
<pre lang="xml">

最後選回預設的空白 文字背景色卻跑出來了......
本篇文章回覆於2018-08-24 15:54
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
作者回應

883065
檢舉此回應
不好意思 大多數問題都解決了
由於沒辦法修改編輯或刪除之前發帖的內容 真是不好意思

目前想知道
1.要如何減少攏長不必要的代碼 ex: &nbsp;
2.切換選項後顯示的項目如何對齊
本篇文章回覆於2018-08-24 16:20
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
5樓
不錯的參考

淺水員
檢舉此回應
樓主是用什麼軟體做的阿?(感覺不像是手工打的)
這軟體產生出來的 code 滿可怕的
例如: <tr><style ...> 應該會滿有問題的

下面是根據需求打的
可以參考看看

本篇文章回覆於2018-08-24 23:53
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
6樓
作者回應

883065
檢舉此回應
感謝 淺水員的答覆
我還只是一個初學者 目前只是單純用TXT記事本來編輯
為了讓選項可以對齊 才會添加很多不必要的東西
也覺得看起來相當恐怖且不專業
因此在此向大家請教如何修改比較好
本篇文章回覆於2018-08-25 01:50
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
7樓
回應

淺水員
檢舉此回應
原來如此
不過以初學來說,建議看一下W3C的教學:https://www.w3schools.com/

這邊順便提幾個點:
1. table tr td 的結構務必完整,一定要有開頭跟結尾。
2. <style></style>裡面是放樣式表(CSS),不是拿來設定 style 屬性的。如果要設定 style 屬性,要像這樣:<tr style="......"><td>文字</td>...</tr>

上面兩點關於結構性的正確性,與美觀無關喔。
其實我複製1F的程式碼,不管是 firefox chrome edge ie11 都跑不出你圖片的結果,因為結構已經是有問題了。

我沒有要批評的意思
只是覺得應該要說明清楚,這樣對學習才有幫助
本篇文章回覆於2018-08-26 18:12
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
8樓
作者回應

883065
檢舉此回應
感謝 淺水員您的答覆
我剛看了一樓
因為不太清楚要怎麼樣用您那種貼code呈現方式
於是我直接把code貼過來的關係 導致很多code都隱藏了(我沒注意到)
所以結構上看起來才會有頭沒尾的
非常感謝您的細心說明
本篇文章回覆於2018-08-26 18:31
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
9樓
回應

彩虹
檢舉此回應
to 淺水員
對新人來說,要講的東西實在是太多了
所以我在 1F 的回覆後面,有補上 「等你先懂基礎的部分後,可以改用 class 來做會更好」
一下子要他吸收html、一下子又 css、javascript...等

我是先採一步一步來教,先搞懂如何使用 style,再來談其他部分~
所以你有發現嗎~等發文者完成「換色、隱藏的功能」後,自然而然就會發覺到排版問題
這時候我們再來教,對於新手來說會比較能體會

最後可能就會問我們還有什麼更好的做法~對吧

謝謝您

================
題外話:
我也蠻好奇你用什麼IDE撰寫程式的,因為這樣的子的排版(如下),可讀性可能不太好,對新手來說也會很吃力


如果是這樣子會比較好容易解讀




本篇文章回覆於2018-08-26 19:47
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
10樓
回應

淺水員
檢舉此回應
我是用純文字編輯器啦
彩虹那樣排的確是比較好
不過有個小地方是,由於選項的 div 我用 inline-block
換行有多餘的空白會造成 div 跑到下一行
所以可能要這樣:


本篇文章回覆於2018-08-27 00:33
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
11樓
作者回應

883065
檢舉此回應
感謝 淺水員 和 彩虹 兩位的指教
之後我嘗試將code用各種排序 想觀看各種結果
發現呈現的格式 都很難達到理想的位置
興趣 : 項目1 項目2
項目3 項目4 項目5


興趣後面直接承接項目選項 大多會跳行 或是格式跳掉
亦或是 切換男女後 項目沒法對其等問題

例如若我想將顯示結果 調整為如下圖(center置中排版)
應該要怎做調整比較恰當





本篇文章回覆於2018-08-28 11:10
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
12樓
回應

彩虹
檢舉此回應
排版方面,的確就要多花點工作了∼
教起來也要花很多時間

前期你可先求有畫面就好,然後多參考其他網站的排版
你可以透過檢視原始碼來看∼

剛好現在是中午消遣時間,稍微做了版面,你可以參考看看



本篇文章回覆於2018-08-28 13:19
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
13樓
作者回應

883065
檢舉此回應
感謝 彩虹 您的指導
其實最初我是用pre來製作陽春的排版
但是加入有功能的code寫入後 格式就全跑了


還有一點好奇的是 這次隱藏的功能卻因此失效了
可能我的程度還太低 暫時無法看出原因為何


本篇文章回覆於2018-08-28 16:09
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
14樓
回應

彩虹
檢舉此回應
哦∼補一下 !important,權重問題
".hobby-male span{background-color:#99F} .hobby-female{display:none!important}",
".hobby-male{display:none!important} .hobby-female span{background-color:#F99}"
本篇文章回覆於2018-08-28 16:17
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.