show/hide a div using select in jquery
Question
I have seen lots of post about this topic. My concern is, would it be possible if I place a jquery inside a div? It's like a jquery inside a div in which that div is shown/hidden using select in jquery. considering there are multiple of divs and each have different jquery. What would be the proper syntax for this if possible?
3 answers
solution1
0 2014-09-09 09:05:25
use
$(this).find(':selected').val()
instread of
$(this).val()
solution2
0 2014-09-09 09:14:26
EDIT
Normal page structure:
<html>
<head>
<style />
<link />
</head>
<body>
<link />
<script>
</script>
</body>
</html>
You should place all the js that aren't inside a file at the bottom of the body, so the page will be loaded and the content willl be displayed.
If you put a js code inside the page as it is, like alert('hi'); it will be executed once the browser reaches that rendering point, this could lead to problems if the js code points to an uncompleted html rendered node (like a div that is inserted after the js code), that's why people usually wrap their code inside $( document ).ready(function() {} function to run the code once the document is ready.
If you want to run a specific js after an event (like show a div) you have to wrap it inside a calling event function (like .change() or .onclick ).
Basically:
- 'Free' code will be executed once the page reach that point
- 'Wrapped' code will be execute when the event is triggered
Example:
<div>
<script> alert('hi');</script>
</div>
The code will be execute once the page load reach that point, even if the div is hidden or not
<div id='test'>
<script> $('#test').onclick(function(){alert('hi');})</script>
</div>
The js will be trigger once you click on the div, even if the div is hidden or not
ORIGINAL
I haven't uderstood your question, however these are the possibilities:
1) Show a code and hide/show div : JSFiddle - Running Example
HTML
<select id="choice">
<option value="1" selected>one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<div id="1" class="hidden"> some codes <xmp><script>jquery 1 here...</script></xmp></div>
<div id="2" class="hidden"> some codes <xmp><script>jquery 2 here...</script></xmp></div>
<div id="3" class="hidden"> some codes <xmp><script>jquery 3 here...</script></xmp></div>
CSS:
.hidden{
display:none;
}
.chosen{
display:block;
}
JS:
$(function() {
$('#choice').change(function(){
if( $('.chosen').length >0){
$('.chosen').removeClass('chosen');
}
$('#' + $(this).val()).addClass('chosen');
});
});
2) Run a code when div is selected : JSFiddle - Running Example
HTML:
<select id="choice">
<option value="1" selected>one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
JS:
$(function() {
$('#choice').change(function(){
switch($(this).val()){
case '1':
alert('1');
break;
case '2':
alert('2');
break;
case '3':
alert('3');
break;
default:
alert('error');
}
//if/else structure
/* var val=parseInt($(this).val());
if( val==1){
alert('1');
}
else if(val==2){
alert('2');
}
else{
alert('3');
}*/
});
});
solution3
0 2014-09-09 09:16:40
Here is one Example of What you are looking for...
HTML:
<select id="thechoices">
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
<option value="all">All Boxes</option>
</select>
<div id="boxes">
<div id="box1"><p>Box 1 stuff...</p></div>
<div id="box2"><p>Box 2 stuff...</p></div>
<div id="box3"><p>Box 3 stuff...</p></div>
</div>
Jquery:
$(document).ready(function(){
$('#box1').hide();
$('#box2').hide();
$('#box3').hide();
$("#thechoices").change(function(){
if(this.value == 'all')
{$("#boxes").children().show();}
else
{$("#" + this.value).show().siblings().hide();}
});
$("#thechoices").change();
});
Working Demo:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.