以下の目的を持った連携メニューを実装します。
1. 「匿名グループ」をクリックすると、自動的に次のページに移動します: メンバータイプ「プライベートグループ」、アクセス制御「グループメンバー」
2. [パブリック グループ] をクリックすると、自動的に次のページに移動します: メンバー タイプ [実名グループ]
以下に示すように:
まず、jqueryライブラリを使用してラジオをクリックするイベントを取得します。イベントを取得した後、どのラジオにチェックが入っているかを判断して連携変換を行います。
発生した問題には、IE および Firefox のイベントとの互換性、および select でのオプションの selected 属性の設定が含まれます。
IE および Firefox と互換性があり、var ie=document.all;var nn6=document.getElementById&&!document.all; を使用します。
select でオプションの selected 属性を設定するには、 var t=document.getElementsByName("select1")[0][1]; を使用します。
selected 属性を設定する場合、通常 document.getElementsByName("select1").options が使用されますが、Firefox では未定義と報告されます。そこで、走査後、配列を使用してそれを解決しました。
目標 1 を達成する完全なコードの例:
// JavaScript ドキュメント var ie=document.all; var nn6=document.getElementById&&!document.all; $(document).ready(function(){ /*「匿名グループ」をクリックします、自動ジャンプ: メンバー タイプ "プライベート グループ"、アクセス制御 "グループ メンバー"*/ $(":radio").click(function(e){ - var $name=(nn6?e.target.name: events .srcElement.name);
- if($name == "member_type")
- {
- if(1 == GetRadioValue($name))
- SetRadioCheck("search_type",1);
- var t=document. ("select1")[0][1];
- t.setAttribute("selected","selected");
- }
- }
- /*「パブリック グループ」をクリックすると、メンバー タイプ「実名グループ」に自動的に移動します" */
- if($name == "search_type")
- {
- if(1 == GetRadioValue($name))
- {
- SetRadioCheck("member_type",0);
- }
- }
- });
- } ) ;
- /*チェックされたラジオの値を取得します
- *RadioName: ラジオの値を取得するラジオ グループの名前
- */
- function GetRadioValue(RadioName){
- var obj=document.getElementsByName(RadioName) ;
- if(obj!=null){
- var i;
- for(i=0;iif(obj[i].checked){
- return obj[i].value;
- }
- }
- }
- return null;
- }
- /*選択した属性を設定します
- *RadioName: 属性ラジオ グループの名前を変更します
- *i: ラジオ内の i 番目の要素が選択されます
- */
- function SetRadioCheck(RadioName,i){
- var obj;
- obj=document.getElementsByName(RadioName)
- //obj[i].setAttribute("checked","checked"); ;
- }
- コードをコピー
SetRadioCheck への 2 回目の呼び出し用
-
- if($name == "search_type")
- {
- if(1 == GetRadioValue($name))
- {
- SetRadioCheck("member_type",0);
- }
- }
- obj[i ].setAttribute("checked", "checked") が無効です。アドバイスをお願いします。
コードをコピー
|