對(duì)于聯(lián)動(dòng)菜單大家都不會(huì)陌生了，但是這還是我第一次寫聯(lián)動(dòng)的了。原理很簡(jiǎn)單，但是自己寫起來(lái)就感覺(jué)還是有點(diǎn)難度的了。

　　實(shí)現(xiàn)目標(biāo)：1、點(diǎn)擊“匿名小組”，自動(dòng)跳轉(zhuǎn)：成員類型“私密群”、訪問(wèn)控制 “群成員”
　　　　　　　2、點(diǎn)擊“公開(kāi)群”，? 自動(dòng)跳轉(zhuǎn)：成員類型“實(shí)名小組”?

　　

　　首先是獲得點(diǎn)擊radio的事件，用的是jquery庫(kù)，獲得事件后判斷是那個(gè)radio，通過(guò)判斷是那個(gè)radio被checked了然后進(jìn)行聯(lián)動(dòng)變換。其中遇到的問(wèn)題有，兼容ie和firefox的事件，然后是設(shè)置select中的中options的selected屬性。

　　兼容ie和firefox用了var ie=document.all;var nn6=document.getElementById&&!document.all;

　　設(shè)置select中的中options的selected屬性用的是var t=document.getElementsByName("select1")[0][1];?t.setAttribute("selected","selected");

　　在設(shè)置selected屬性通常用的是document.getElementsByName("select1").options,但是firefox報(bào)undefined。于是遍歷后就用了一個(gè)數(shù)組解決了。

　　下面是實(shí)現(xiàn)了目標(biāo)1的完整代碼：

html

View Code 1 <script type="text/javascript" src="jquery.js"></script>
2 ?<script type="text/javascript" src="l.js"></script>
3
4 ?<p><label>成員類型:</label>
5 <input type="radio" name="member_type" checked="checked" value='0'/>實(shí)名小組(使用姓名)
6 <input type="radio" name="member_type" value='1'/>匿名小組(使用昵稱)
7 </p>
8 <p><label>群組類型:</label>
9 <input type="radio" name="search_type" checked="checked" value='1'/>公開(kāi)群
10 <input type="radio" name="search_type" value='0'/>私密群
11 </p>
12 <p><label>訪問(wèn)控制: </label>
13 <select class="select1" name="select1">
14 <option value="0">任何人</option>
15 <option value="1">群成員</option>
16 </select>
17 </p>

js

View Code // JavaScript Document

var ie=document.all;
var nn6=document.getElementById&&!document.all;

$(document).ready(function(){
$(":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");
}
}
});
});

/*獲得被check的radio的值*/
function GetRadioValue(RadioName){
var obj;
obj=document.getElementsByName(RadioName);
if(obj!=null){
var i;
for(i=0;i<obj.length;i++){
if(obj[i].checked){
return obj[i].value;
}
}
}
return null;
}

/*設(shè)置被選中屬性*/
function SetRadioCheck(RadioName,i){
var obj;
obj=document.getElementsByName(RadioName);
obj[i].setAttribute("checked","checked");
}

實(shí)現(xiàn)目標(biāo)2時(shí)，遇到了SetRadioCheck中的setAttribute不好使了，調(diào)試了也不知道什么原因于是換了obj[i].checked = true;

實(shí)現(xiàn)功能1、2 js

View Code // JavaScript Document

var ie=document.all;
var nn6=document.getElementById&&!document.all;

$(document).ready(function(){
/*點(diǎn)擊"匿名小組"，自動(dòng)跳轉(zhuǎn)：成員類型"私密群"、訪問(wèn)控制 "群成員"*/
$(":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");
}
}
/*點(diǎn)擊"公開(kāi)群"， 自動(dòng)跳轉(zhuǎn)：成員類型"實(shí)名小組"*/
if($name == "search_type")
{
if(1 == GetRadioValue($name))
{
SetRadioCheck("member_type",0);
}
}
});
});

/*獲得被check的radio的值
*RadioName：要獲得radio值的radio組名稱
*/
function GetRadioValue(RadioName){
var obj;
obj=document.getElementsByName(RadioName);
if(obj!=null){
var i;
for(i=0;i<obj.length;i++){
if(obj[i].checked){
return obj[i].value;
}
}
}
return null;
}

/*設(shè)置被選中屬性
*RadioName:要修改屬性radio組的名稱
*i:radio中第i個(gè)元素被選中
*/
function SetRadioCheck(RadioName,i){
var obj;
obj=document.getElementsByName(RadioName);
//obj[i].setAttribute("checked","checked");
obj[i].checked = true;
}

對(duì)于在第二次調(diào)用SetRadioCheck

if($name == "search_type")
??{
???if(1 == GetRadioValue($name))
???{
????SetRadioCheck("member_type",0);
???}
??}

?obj[i].setAttribute("checked","checked")的失效，還請(qǐng)指教。

總結(jié)

以上是生活随笔為你收集整理的关于js获取radio和select的属性并控制的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。