[HTML/JS] Jeigu nepasirinktas select nerodytų div

Sveiki,

turiu bėda. Noriu pasidaryti štai tokį dalyką su select, jeigu pažymėtas select 1 išvestų : Tu pasirinkai nr.1, jeigu pasirinktų select 2 išvestų : Tu pasirinkai nr.2 . Lyg viskas ir pavyko, tačiau, tik įsijungus puslapį kol dar niekas nėra pasirinkta, išveda abu variantus : Tu pasirinkai nr.1 Tu pasirinkai nr.2 .

Kodas :

<script type="text/javascript">
function changeFunc() {
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value

if(selectedValue == "1") {
	$("#a2").hide();						
	$("#a1").show();				
} else if(selectedValue == "2"){
	$("#a2").show();						
	$("#a1").hide();		
} 

}
</script>
<select id="selectBox" onchange="changeFunc();">
<option value="1">NR 1</option>
<option value="2">NR 2</option>
</select>
<div id="vip_body1">
<div id="a1">
	Tu pasirinkai nr.1
</div>
<div id="a2">
	Tu pasirinkai nr.2
</div>
</div>

Dėkui už pagalbą ^_^

Labas,

jQuery(document).on('ready', function() {
   jQuery("#vip_body1").find('div').each(function(){
      jQuery(this).hide();
   });
});

arba tiesiog ant #a1 ir #a2 užmesk display: none;

PS. kad panaudotum jquery kodą, teks integruoti patį jQuery pack'ą :)

.find("div")

Yra blogas sprendimas. Jis ieškos div'ų ne tik iš karto esančiuose vaikuose, bet visuose elementuose esančiuose jame. Tai ir veiks lėčiau nei turėtų, ir veiks neteisingai.

Teisingas sprendimas būtų kažkas tokio:

$(document).ready(function() {
	$("#vip_body1").children("div").hide();
	$("#selectBox").change(function() {
		$("#vip_body1").children("div").hide();
		$("#vip_body1 > div#a"+ $(this).val()).show();
	});
});

Po trijų edit'ų, pavargau galvoti, kaip čia tą indent'ą sutvarkyti. Tiek to... Susitvarkė!

Fiddle: http://jsfiddle.net/bb38a/

Dėkui už pagalbą. Satisfaction variantas tiko

bet ar "find" neieško kartais tik tame parente, kurį nurodžiau?

jQuery("#vip_body1").find('div').each

reliai apims tik visus divus, esančius "vip_body" selectoriuje, jo viduje. Tai realiai tas pats kas ir "children", nes "children" veikia ar ne taip pat? irgi ieško visų vaikų tėviniam dive (vip_body) ir juos paslepia

Sukūriau fiddle: http://jsfiddle.net/UbL4Z/

Matoma, kad find() visus descendant'us pakeičia. Tai reiškia - eina per visą DOM ir ieško. Jei imant pavyzdį su show/hide, tai vėliau būtų problemų, jei unhide'intum vien tik parent'ą - visi vaikai vis dar būtų pasislėpę.

šitą suprantu, bet jo atveju matau nekeičia esmės kaip daryti, nebent "children" veikia greičiau nei "find". Nes, pas jį parentas turi tik divus su plain HTML tekstu, tai čia kaip ir nesvarbu kaip jau darysi, giliau niekas neina

Na, niekada nežinosi, kas ten gali būti viduje, sistema turi būti dinamiška. O čia tik pavyzdys, manau. Nereikia tobulinant sistemą prikurti papildomų problemų.

Jei žiūrint tokiu požiūriu, tai galim tiesiog dėti .find("*") ir viskas tvarkoj, nes ten tik plain text bus :)

Man atrodo kažkaip jus čia persistengiat.

CSS:

#vip_body1 > div {display: none;}

Arba blogiausiu atveju, jeigu jau su jQuery selectoriais taip norisi daryti, tai

$("#vip_body1 > div").hide();

Bet geriau visgi CSS