I am trying to create an auto hide/show function for when someone selects a certain "option" on a select element. Here's what I have for the "selector":
<li id="foli16" class="name notranslate">
<label class="desc" id="title16" for="Field16">
Repeat Pattern
<span id="req_16" class="req"></span>
</label>
<span class="left">
<select id="Field16" style="margin-left: 0px;" name="" class="field select">
<option value="" <?php echo $doc_selected; ?>>None</option>
<option value="" <?php echo $doc_selected; ?>>Daily</option>
<option value="" <?php echo $doc_selected; ?>>Weekly</option>
<option value="" <?php echo $doc_selected; ?>>Monthly</option>
<option value="" <?php echo $doc_selected; ?>>Yearly</option>
</select>
</span>
<p class="instruct" id="instruct16"><small>How often does this test occur?</small></p>
</li>
When someone selects the "daily" option, I want the div with the id of "daily" to show. If they select a different one, it needs to close the visible one and show the new selection.
I have done this before with click buttons and a single toggle, but I am unsure how to write this for such a large toggle, especially using a select "option". I assume my options will need ID's as well.
You have 5 option elements, if you have 5 target elements that should be hidden/shown according to the selected option, you can add a class to your target elements and use eq
and index
methods:
var $targets = $('.theTargets');
$('#Field16').change(function(){
var i = $('option:selected', this).index();
$targets.hide().eq(i).show();
});
In case that you want to select the target element by ID:
$(function(){
var $targets = $('.theTargets'); // If they have a common class name
$('#Field16').change(function(){
var id = this.value.toLowerCase();
$targets.hide().filter('#' + id).show();
})
})
You can use the change function for the select field, and grab the ID of the selected option.
<script>
$(document).ready(function() {
//This will fire when an option is selected from <select>
$("#Field16").change(function() {
//Add a class to all div's so you can hide previous ones
$(".whateveryourclassis").hide();
//Get the ID of the selected option
var selectedID = $(this).attr("id") + "div";
//Show the right div. (assuming the div you want has the same ID as option
//with "div" after it
$("#" + selectedID).show();
}
}
</script>
You could do something like this:
$('select').on('change', function () {
$('li').hide()
$('#' + this.value).show();
});
Building from tymeJV's answer,
I would give each of the divs which will be hidden/shown a class name such as showhide
, then
$("#Field16").change(function() {
//Get the ID of the desired div
var selectedID = $(this).val();
$(".showhide").hide();
$("#" + selectedID).show();
}
You can try something like this.
You can bind the select to an onchange event and grab the value like.
$('#Field16').bind('change',function(){
$('.box').hide(); // All the elements you want to hide on change.
$('#'+$(this).val()).show();
});
Exactly what you want:
HTML
<select id="Field16" style="margin-left: 0px;" name="" class="field select">
<option value="">None</option>
<option value="">Daily</option>
<option value="">Weekly</option>
<option value="">Monthly</option>
<option value="">Yearly</option>
</select>
<div id="none">I am None</div>
<div id="daily">I am Daily</div>
<div id="monthly">I am Monthly</div>
<div id="weekly">I am Weekly</div>
<div id="yearly">I am Yearly</div>
jQuery
jQuery(document).ready(function($){
hide_all();
function hide_all(){
$("#Field16 option").each(function(){
var ids=$(this).text().toLowerCase();
$('#'+ids).hide();
});
}
$("#Field16").change(function(){
hide_all();
var val=$('option:selected',this).text().toLowerCase();
$('#'+val).show();
});
});
here is the demo: http://jsfiddle.net/8wKzQ/
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.