作者asuka05 (人生以快乐为最终目标)
看板Ajax
标题Re: [问题]php网页有办法做到这种动态显示吗
时间Fri Mar 27 09:42:44 2009
※ 引述《danielkimo (Daniel)》之铭言：
: (a)新增使用者
: (b)修改使用者
: (c)新增帐户
: (d)修改帐户
: ----------------------------------------
: 内容显示区
: ----------------------------------------
: 请问选项区若是用<input name="opinion" type="radio" />这种表单元件，
: 当使用者点选不同选项，若在同一页的内容显示区要显示不同的内容，
最近我写一个表单，刚好有动态切换选项内容的功能，
以下的作法提供一个参考(心想应该有更好的作法)
我的触发元件不是 radio 而是 select option 不过应当同理，都可以透过
onChange="change_event(this.value)" 来触发 js 的函式
接着在 js 片段写
function change_event(type)
{
if (type ==1)
{
$("div.t1").css({ display:"none"});
$("div.t2").css({ display:"none"});
$("div.t3").css({ display:"block"});
}
else if (type ==2)
{
$("div.t1").css({ display:"none"});
$("div.t2").css({ display:"block"});
$("div.t3").css({ display:"none"});
}
else
{
$("div.t1").css({ display:"block"});
$("div.t2").css({ display:"none"});
$("div.t3").css({ display:"none"});
}
}
ps. 上头用到 jQuery物件语法，如果要自行操作DOM/CSS也是可以
因此，在不同呈现区块的 html片段大概是长这样，div里头包不同的内容
<div class="t1" >类别一</div> <!--刚载入预设是秀t1-->
<div class="t2" style='display:none'>类别二</div>
<div class="t3" style="display:none">类别三</div>
绑定对象上我用class而不用id的原因，是呈现的区块有好几个，如果用id会比较死。
题外：
不同区块内容，之後送值到後端时需要留意接值的细节
如先判断类别再接对应的 name value，避免收到null导致错误
--
╭╯
╭╬╮ ╭╮╭╗
╚╯╰。 ﹍﹎﹍﹎﹍
﹎﹍﹎﹍﹎
﹍﹎﹍﹎﹍﹎﹍
╰╬╯。
╭╭╗ ▉▏▍天下武功，无坚不破，唯快不破。 ▏▊▊▌ ╔╮╰╯
╰╬╯。
﹊
﹉﹊﹉﹊﹉﹊﹉﹊
﹉﹊﹉﹊﹉﹊﹉﹊
╰╬╯。
╰╯ 。╯
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 140.119.210.191