[SOLUCIONADO] jQuery select box - dar estilo a select -

#1 (**permalink**) 21/10/2014, 13:24

Buenas,

estoy intentando dar estilo a dos select que tengo. Estoy utilizando la librería jquery.selectbox-0.2.js pero solo me lo aplica a uno de los select. He probado a poner una clase en ambos select y luego aplicarla en la función pero tampoco lo aplica a los dos, si no solo a uno.
Dejo el código por si alguien me puede ayudar cómo se podría aplicar:

<script type="text/javascript" src="js/jquery.selectbox-0.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#privileges").selectbox();

});
</script>

<div class="fila">
<span class="etiqueta"><label for="privileges">Privileges: </label> </span>
<span class="form-el">
<select id="privileges" name="privileges">
<option value="selected" id="selected" selected>Select your privilege</option>
<option value="uno">Uno</option>
<option value="dos">Dos</option>
<option value="tres">Tres</option>
</select></span>
</div>
<div class="fila">
<span class="etiqueta"><label for="company">Company: </label></span>
<span class="form-el"><select id="company" name="company">
<option value="selected" selected>Select your company</option>
<option value="uno">Uno</option>
<option value="dos">Dos</option>
<option value="tres">Tres</option>
</select> </span>
</div>

Un saludo

GeekGirl · #2 (**permalink**) 21/10/2014, 14:08

Te lo aplica a uno solo porque estás instanciando a uno solo con selectbox.

Tu código

Código Javascript:

Ver original$(function () {
    $("#privileges").selectbox();
});

Debería ser:

Código Javascript:

Ver original$(function () {
    $("#privileges").selectbox();
    $("#company").selectbox();
});

Saludos :)

#3 (**permalink**) 21/10/2014, 14:21

Buenas,

eso ya lo he probado pero solo me lo aplica a privileges. He probado también a aplicar la misma clase a ambos y meterla en la función pero tampoco me coge en ambos select.

#4 (**permalink**) 21/10/2014, 14:37

Buenas,

eso ya lo he probado pero solo me lo aplica a privileges. He probado también a aplicar la misma clase a ambos y meterla en la función pero tampoco me coge en ambos select.

GeekGirl · #5 (**permalink**) 21/10/2014, 16:13

Probablemente el id company esté en uso para otro elemento y esté trayendo conflicto. Probá reemplazarlo por otro. Te digo esto porque me descargué un ejemplo de la web de selectbox y probé de instanciarlo como te dije y funcionó perfectamente.

Te lo adjunto por si te es de utilidad:

Código HTML:

<!doctype html>
<html>
	<head>
		<title>jQuery SelectBox plugin</title>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<link href="css/jquery.selectbox.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<select name="country_id" id="country_id" tabindex="1">
			<option value="">-- Select country --</option>
			<optgroup label="North America">
				<option value="1">USA</option>
				<option value="9">Canada</option>
			</optgroup>
			<optgroup label="Europe">
				<option value="2">France</option>
				<option value="3">Spain</option>
				<option value="6">Bulgaria</option>
				<option value="7" disabled="disabled">Greece</option>
				<option value="8">Italy</option>
			</optgroup>
			<optgroup label="Asia" disabled="disabled">
				<option value="5">Japan</option>
				<option value="11">China</option>
			</optgroup>
			<option value="4">Brazil</option>
			<option value="10">South Africa</option>
		</select>
		
		<select name="country_id2" id="country_id2" tabindex="1">
			<option value="">-- Select country --</option>
			<optgroup label="North America">
				<option value="1">USA</option>
				<option value="9">Canada</option>
			</optgroup>
			<optgroup label="Europe">
				<option value="2">France</option>
				<option value="3">Spain</option>
				<option value="6">Bulgaria</option>
				<option value="7" disabled="disabled">Greece</option>
				<option value="8">Italy</option>
			</optgroup>
			<optgroup label="Asia" disabled="disabled">
				<option value="5">Japan</option>
				<option value="11">China</option>
			</optgroup>
			<option value="4">Brazil</option>
			<option value="10">South Africa</option>
		</select>

		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.selectbox-0.2.js"></script>
		<script type="text/javascript">
		$(function () {
			$("#country_id").selectbox();
			$("#country_id2").selectbox();
		});
		</script>
	</body>
</html>

#6 (**permalink**) 24/10/2014, 06:30

Efectivamente Geek, me estaban dando conflicto entre dos archivos jquery que tenía, estaba orientando el problema hacia otro lado y no me daba cuenta.

Muchas gracias!!!