Tengo 3 divs con los cuales quiero cambiar el contenido cada vez que cambie el option select, pero al ejecutar en el navegador no hace lo que espero que haga, sera que me falta algo para poder hacer que funcione?
function seleccionado(){
var opt = $('#opcion').val();
// alert(opt);
if(opt==cat){
$('#categoria').show();
$('#subategoria').hide();
$('#producto').hide();
}else{
if(opt==subcat){
$('#categoria').hide();
$('#subategoria').show();
$('#producto').hide();
}else{
$('#categoria').hide();
$('#subategoria').hide();
$('#producto').show();
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="span4" id="selDiv">
<select class="selectpicker" data-style="btn-danger" id="opcion" name="opcion" onchange="seleccionado()" >
<option selected value="cat">Categorias</option>
<option value="subcat">Subcategorias</option>
<option value="prod">Productos</option>
</select>
</div>
<div id="contenido">
</div>
<!--Show Product Categories List-->
<div id="categoria" style="display:none;">
<div class="row">
<div class="col-md-12">
<h3 class="center">Lista de Categorias</h3>
</div>
</div>
<div>
<div id="subcategoria" style="display:none;">
<div class="row">
<div class="col-md-12">
<h3 class="center">Lista de Subcategorias</h3>
</div>
</div>
<div>
<div id="producto" style="display:none;">
<div class="row">
<div class="col-md-12">
<h3 class="center">Lista de Productos</h3>
</div>
</div>
<div>
cat
. puedes arreglarlo para que se pueda ejecutar? Un saludo