select con jquery

CosmosArgentino · #1 (**permalink**) 23/09/2016, 19:51

Haber si me ayudan por favor , el problema que tengo con el codigo es que no me muestra el color de fondo de la pagina cuando elijo la opcion del select quisiera saber donde esta el error gracias .Aqui va el codigo :

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

$(document).ready(inicio)
function inicio(){
$("select").change(cambiacss);
}
function cambiacss(){
var plantilla =$("select").attr("value");

$("plantilla").html('<link rel="stylesheet" href="css/'+plantilla+'.css" type="text/css">')
}
</script>

<link rel="stylesheet" href="css/base.css" type="text/css">
<plantilla>
<link rel=Stylesheet href="css/movil.css" type="text/css" media="screen and (max-width:400px) and (min-width:1px)">
<link rel=Stylesheet href="css/tablet.css" type="text/css" media="screen and (max-width:680px) and (min-width:401px)">
<link rel=Stylesheet href="css/pc1.css" type="text/css" media="screen and (max-width:1200px) and (min-width:681px)">
<link rel=Stylesheet href="css/pchd.css" type="text/css" media="screen and (max-width:3600px) and (min-width:1201px)">
</plantilla>
</head>

<body>
<select name="plantilla">
<option value="">Selecciona una plantilla</option>
<option value="pc1">Plantilla para PC</option>
<option value="pchd">Plantilla alta definición</option>
<option value="movil">Plantilla para teléfono móvil</option>
<option value="tablet">Plantilla para tableta digital</option>
</select>
</body>
</html>

este es el codigo de pc1.css:

body{
background-color:green;
}
gracias a todos

AngelKrak · #2 (**permalink**) 24/09/2016, 06:52

El error es el .attr("value") debe ser el val() directamente

Código Javascript:

Ver original$(document).ready(inicio)
 
function inicio() {
  $("select").change(cambiacss);
}
 
function cambiacss() {
  var plantilla = $("select").val();
 
  $("plantilla").html('<link rel="stylesheet" href="css/' + plantilla + '.css" type="text/css">');
 
  //Prueba
  $("p").text('<link rel="stylesheet" href="css/' + plantilla + '.css" type="text/css">');
}

aqui te dejo una demo:
http://codepen.io/anon/pen/VKpAWX