JS操作struts標籤問題
阿新 • • 發佈：2019-02-06
使用struts2標籤會帶來很多便利，但在用js控制（定位及獲取屬性值等）struts2標籤時要特別注意，因為struts2標籤在頁面最終顯示時，實際上還是轉換為html標籤來顯示，js（包括jquery和prototype等js框架）也是對基本的html標籤來定位及獲取其屬性值；若用js操作html標籤的方式來直接操作struts標籤，可能會遇到一些“很怪異”（從程式碼邏輯上找不到錯誤）的問題，讓人很鬱悶，如何解決這種問題？
最簡單的方法是：用html標籤代替struts2標籤。但這樣便無法享受struts2標籤所帶來的便利，而且會在頁面中摻雜很多jsp程式碼（<%....%>）。我比較喜歡另一種方法：頁面顯示後，檢視其經過瀏覽器解析後的原始碼（瀏覽器自帶有檢視頁面原始碼的功能），其實就是strut2標籤解析為對應的html標籤，再用js操作就比較簡單了，不用在此贅述。建議用fireFox瀏覽器除錯web頁面，可以用其fireBug功能除錯js。
下面看一個例子：
Html程式碼為：
<div>
錄入選項：<s:radio id=”opt” name="opt" list="#{'theTeach':'人員理論教學','cliTeach':'人員臨床教學','teaArticle':'教學管理文章','giftCourse':'精品課程','giftBook':'精品教材','excePaper':'指導優秀論文','eduCheck':'教育年度考核子集'}" value="'theTeach'" listKey="key" listValue="value">
</s:radio>
</div>
Js程式碼為：
var s=document.getElementById(“opt”).value;
或者jquery程式碼為：
var s=$(“#opt”).attr(“value”);
表面上看起來都沒有錯誤，但實際上s卻得不到值，為什麼呢？
檢視瀏覽器解析後的原始碼如下：
<div>
錄入選項：<input type="radio" name="opt" id="opttheTeach" checked="checked" value="theTeach"/><label for="opttheTeach">人員理論教學</label>
<input type="radio" name="opt" id="optcliTeach" value="cliTeach"/><label for="optcliTeach">人員臨床教學</label>
<input type="radio" name="opt" id="optteaArticle" value="teaArticle"/><label for="optteaArticle">教學管理文章</label>
<input type="radio" name="opt" id="optgiftCourse" value="giftCourse"/><label for="optgiftCourse">精品課程</label>
<input type="radio" name="opt" id="optgiftBook" value="giftBook"/><label for="optgiftBook">精品教材</label>
<input type="radio" name="opt" id="optexcePaper" value="excePaper"/><label for="optexcePaper">指導優秀論文</label>
<input type="radio" name="opt" id="opteduCheck" value="eduCheck"/><label for="opteduCheck">教育年度考核子集</label>
</div>
由此可看出上述js程式碼是不可能獲取值的。可改為：
var s=$(“:radio:checked”).attr(“value”);
另外，要特別注意上述<s:radio>標籤中的屬性value=“’theTeach’”設定預設選中項，要求value的值必須與list屬性中的key值完全相同。
最簡單的方法是：用html標籤代替struts2標籤。但這樣便無法享受struts2標籤所帶來的便利，而且會在頁面中摻雜很多jsp程式碼（<%....%>）。我比較喜歡另一種方法：頁面顯示後，檢視其經過瀏覽器解析後的原始碼（瀏覽器自帶有檢視頁面原始碼的功能），其實就是strut2標籤解析為對應的html標籤，再用js操作就比較簡單了，不用在此贅述。建議用fireFox瀏覽器除錯web頁面，可以用其fireBug功能除錯js。
下面看一個例子：
Html程式碼為：
<div>
錄入選項：<s:radio id=”opt” name="opt" list="#{'theTeach':'人員理論教學','cliTeach':'人員臨床教學','teaArticle':'教學管理文章','giftCourse':'精品課程','giftBook':'精品教材','excePaper':'指導優秀論文','eduCheck':'教育年度考核子集'}" value="'theTeach'" listKey="key" listValue="value">
</s:radio>
</div>
Js程式碼為：
var s=document.getElementById(“opt”).value;
或者jquery程式碼為：
var s=$(“#opt”).attr(“value”);
表面上看起來都沒有錯誤，但實際上s卻得不到值，為什麼呢？
檢視瀏覽器解析後的原始碼如下：
<div>
錄入選項：<input type="radio" name="opt" id="opttheTeach" checked="checked" value="theTeach"/><label for="opttheTeach">人員理論教學</label>
<input type="radio" name="opt" id="optcliTeach" value="cliTeach"/><label for="optcliTeach">人員臨床教學</label>
<input type="radio" name="opt" id="optteaArticle" value="teaArticle"/><label for="optteaArticle">教學管理文章</label>
<input type="radio" name="opt" id="optgiftCourse" value="giftCourse"/><label for="optgiftCourse">精品課程</label>
<input type="radio" name="opt" id="optgiftBook" value="giftBook"/><label for="optgiftBook">精品教材</label>
<input type="radio" name="opt" id="optexcePaper" value="excePaper"/><label for="optexcePaper">指導優秀論文</label>
<input type="radio" name="opt" id="opteduCheck" value="eduCheck"/><label for="opteduCheck">教育年度考核子集</label>
</div>
由此可看出上述js程式碼是不可能獲取值的。可改為：
var s=$(“:radio:checked”).attr(“value”);
另外，要特別注意上述<s:radio>標籤中的屬性value=“’theTeach’”設定預設選中項，要求value的值必須與list屬性中的key值完全相同。