Implement a linkage menu with the following goals:
1. Click "Anonymous Group" and automatically jump to: Member Type "Private Group", Access Control "Group Members"
2. Click "Public Group" and automatically jump to: Member type "Real-name Group"
As shown below:
First, get the event of clicking the radio, using the jquery library. After getting the event, determine which radio it is. By judging which radio is checked, the linkage transformation is performed.
The problems encountered include compatibility with IE and Firefox events, and then setting the selected attribute of options in select.
Compatible with IE and Firefox, use var ie=document.all;var nn6=document.getElementById&&!document.all;
To set the selected attribute of options in select, use var t=document.getElementsByName("select1")[0][1]; t.setAttribute("selected","selected");
When setting the selected attribute, document.getElementsByName("select1").options is usually used, but Firefox reports undefined. So after traversing, I used an array to solve it.
Example, complete code that achieves goal 1:
When achieving goal 2, I encountered that setAttribute in SetRadioCheck was not working. After debugging, I didn’t know why, so I changed obj.checked = true;
Implement functions 1 and 2 js
-
- // JavaScript Document
- var ie=document.all;
- var nn6=document.getElementById&&!document.all;
- $(document).ready(function(){
- /*Click "Anonymous Group" , automatic jump: member type "private group", access control "group members"*/
- $(":radio").click(function(e){
- var $name=(nn6?e.target.name: event.srcElement.name);
- if($name == "member_type")
- {
- if(1 == GetRadioValue($name))
- {
- SetRadioCheck("search_type",1);
- var t=document. getElementsByName("select1")[0][1];
- t.setAttribute("selected","selected");
- }
- }
- /*Click "Public Group" and automatically jump to: Member type "Real-name Group" */
- if($name == "search_type")
- {
- if(1 == GetRadioValue($name))
- {
- SetRadioCheck("member_type",0);
- }
- }
- });
- }) ;
- /*Get the value of the checked radio
- *RadioName: the name of the radio group to get the radio value
- */
- function GetRadioValue(RadioName){
- var obj;
- obj=document.getElementsByName(RadioName);
- if( obj!=null){
- var i;
- for(i=0;i
- if(obj[i].checked){
- return obj[i].value;
- }
- }
- }
- return null;
- }
- /*Set the selected attribute
- *RadioName: To modify the name of the attribute radio group
- *i: The i-th element in the radio is selected
- */
- function SetRadioCheck(RadioName,i){
- var obj;
- obj=document.getElementsByName(RadioName);
- //obj[i].setAttribute("checked","checked");
- obj[i].checked = true;
- }
Copy code
For the second call to SetRadioCheck
-
- if($name == "search_type")
- {
- if(1 == GetRadioValue($name))
- {
- SetRadioCheck("member_type",0);
- }
- }
- obj[i ].setAttribute("checked", "checked") is invalid, please give me some advice.
Copy code
|