如何顯示隱藏和顯示選擇框？

-1

我google了很多我的requirement.So我發佈這個問題。我的要求是當用戶從下拉列表中選擇一個值，根據該值顯示div。但在默認情況下，所有的div值都要顯示。如何顯示隱藏和顯示選擇框？

這裏是我的代碼：

<select name="lab_1" id="title" > 
    <option value="All" onclick="showAll();" >All</option> 
    <option value="one" onclick="showOther();">One</option> 
    <option value="two" onclick="showOther();">Two</option>  
</select> 
<div id="All" > 
    hiihdhfhdf 
    <div id="otherTitle" style="display:none;" > 
    select 
    </div> 
    <div id="otherTitle2" style="display:none;" > 
    ramsai 
    </div> 
</div> 

<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script> 
<script> 
$(function() { 
$('#title').change(function() { 
    var all= $("#All").val(); 
    alert('hi'); 
    if(all==""){ 
     $("#otherTitle").show(); 
     $("#otherTitle2").show(); 
     } 
     else if (this.value == "one") { 
     $("#otherTitle").show(); 
     $("#otherTitle2").hide(); 
     } 
     else if (this.value=="two"){ 
     $("#otherTitle2").show(); 
     $("#otherTitle").hide(); 
     }  
    }); 
    }); 


</script> 
</body>

這裏與上面的代碼當我點擊我的所有的div都沒有顯示，但是當我去到一個或兩個選項則顯示所有的值。我有42個div的一種適用於所有提到的那些是爲

唯一的解決方案預先感謝您

Ramsai的div jQuery中或低於任何其他解決方案

來源

2012-07-18 ramsai

這是怎麼PHP？ :) – mishu 2012-07-18 12:40:49

與此我使用PHP代碼也，但我沒有給這個問題，所以我把標籤作爲PHP – ramsai 2012-07-18 12:50:39

'div'元素（'＃所有'）沒有價值，所以'$（「 #All「）。val（）'will ** always **返回一個空字符串和'all =='''將**總是**爲** true **。我不明白你在做什麼 – 2012-07-18 12:50:58

<select name="lab_1" id="title" > 
<option value="All" onclick="show(this.value);" >All</option> 
<option value="one" onclick="show(this.value);" >One</option> 
<option value="two" onclick="show(this.value);" >Two</option> 
</select>

現在你的JavaScript會看像這樣：

<script> 
function show(val){ 

    if(val=="All"){ 

    document.getElementById("otherTitle").style.visibility=""; 
    document.getElementById("otherTitle2").style.visibility=""; 

}elseif(val=="one"){ 

    document.getElementById("otherTitle").style.visibility=""; 
    document.getElementById("otherTitle2").style.visibility="collapse"; 

}elseif(val=="two"){ 

    document.getElementById("otherTitle").style.visibility="collapse"; 
    document.getElementById("otherTitle2").style.visibility=""; 
} 
} 
</script>

來源

2012-07-18 12:51:00 Dhruvisha

答案在這裏：http://jsfiddle.net/Hxadj/

代碼中有一些額外的東西不需要在那裏。你也在測試All的價值。我不知道爲什麼，你需要的是將其用（THIS.VALUE == X）

$(function() { 
$('#title').change(function() { 
if(this.value == "All"){ 
    $("#All").show();   
    $("#otherTitle").show(); 
    $("#otherTitle2").show(); 
    } 
    else if (this.value == "one") { 
    $("#All").hide();   
    $("#otherTitle").show(); 
    $("#otherTitle2").hide(); 
    } 
    else if (this.value=="two"){ 
    $("#All").hide();   
    $("#otherTitle2").show(); 
    $("#otherTitle").hide(); 
    }  
}); 
});

UPDATE

鏈接在這裏所做的選擇的價值：http://jsfiddle.net/Hxadj/1/

HTML：

<select name="lab_1" id="title" > 
<option value="All">All</option> 
<option value="otherTitle">One</option> 
<option value="otherTitle2">Two</option> 
</select> 

<div id="All" class="togglers">hiihdhfhdf</div> 
<div id="otherTitle" class="togglers">select</div> 
<div id="otherTitle2" class="togglers">ramsai</div>

$(function() { 
    $('#title').change(function() { 
    var divName = this.value; 
    if(this.value == "All"){  
     $(".togglers").show(); 
    }else{  
     $(".togglers").hide(); 
     $("#"+divName).show();   
     }  
    }); 
});

這應該這樣做。 Bascially您的選擇值必須對應於div ID。然後你不需要進入硬編碼show（）或hide（）規則。

來源

2012-07-18 12:52:19

我有40個div默認所有在頁面加載時有，如果有人選擇列表中的項目，那麼只顯示div值，這是我的確切要求。是否有更好的方法可以做到這一點....... – ramsai 2012-07-19 08:13:00

我更新了我的答案，以反映您提到的更改。 – 2012-07-19 12:49:07

再或者：

$('#title').change(function() { 
    var id = $(this).val(); 
    $('#otherTitle, #otherTitle2').not('#'+id).hide(); 
    $('#'+id).children().show();   
});

Fiddle

來源

2012-07-18 12:55:00

如何顯示隱藏和顯示選擇框？

回答

相關問題