test - jQuery obtener el nombre de una opción de selección

sistema de votacion en php y mysql

Question

Tengo una lista desplegable con varias opciones, cada opción tiene un atributo de nombre. Cuando selecciono una opción, debe aparecer una lista diferente de casillas de verificación; cuando se seleccionan otras opciones, esa lista de casillas de verificación debería desaparecer y aparecer otra.

He creado estas listas de casillas de verificación y les he dado una ID que se correlaciona con el atributo de nombre de la opción seleccionada. Estoy intentando usar el siguiente código para mostrar la lista de casillas de verificación correcta

$(document).ready(function(){
$(''#band_type_choices'').on(''change'', function() {
$(''.checkboxlist'').hide();
$(''#checkboxlist_'' + $(this).attr("name") ).css("display", "block");
});

Sin embargo, nada está sucediendo.

Aquí están mis opciones desplegables:

<select id="band_type_choices">
<option vlaue="0"></option>
<option value="100" name="acoustic">Acoustic</option>
<option value="0" name="jazz">Jazz/Easy Listening</option>
<option value="0" name="acoustic_jazz">Acoustic + Jazz/Easy Listening</option>
<option value="0" name="party">Party</option>
<option value="0" name="acoustic_party">Acoustic + Party</option>
<option value="0" name="jazz_party">Jazz/Easy Listening + Party</option>
<option value="0" name="acoustic_jazz_party">Acoustic + Jazz/Easy Listening + Party</option>
</select>

y un ejemplo de una de las listas:

<div class="checkboxlist" id="checkboxlist_acoustic" style="display:none;">
<input type="checkbox" class="checkbox keys" name="keys" value="100" />Keys<br>
<input type="checkbox" class="checkbox acou_guit" name="acou_guit" value="100" />Acoustic Guitar<br>
<input type="checkbox" class="checkbox drums" name="drums" value="100" />Drums<br>
<input type="checkbox" class="checkbox alt_sax" name="alt_sax" value="100" />Alto Sax<br>
<input type="checkbox" class="checkbox ten_sax" name="ten_sax" value="100" />Tenor Sax<br>
<input type="checkbox" class="checkbox clarinet" name="clarinet" value="100" />Clarinet<br>
<input type="checkbox" class="checkbox trombone" name="trombone" value="100" />Trombone<br>
<input type="checkbox" class="checkbox trumpet" name="trumpet" value="100" />Trumpet<br>
<input type="checkbox" class="checkbox flute" name="flute" value="100" />Flute<br>
<input type="checkbox" class="checkbox cello" name="cello" value="100" />Cello<br>
<input type="checkbox" class="checkbox violin" name="violin" value="100" />Violin<br>
</div>

Answer 1

En primer lugar, el name no es un atributo válido de un elemento de option . En su lugar, podría utilizar un parámetro de data , como este:

<option value="foo" data-name="bar">Foo Bar</option>

El principal problema que tiene es que el JS está mirando el atributo de name del elemento de select , no la opción elegida. Prueba esto:

$(''#band_type_choices'').on(''change'', function() {
$(''.checkboxlist'').hide();
$(''#checkboxlist_'' + $(''option:selected'', this).data("name")).css("display", "block");
});

Tenga en cuenta la option:selected selector option:selected dentro del contexto de la select que provocó el evento de cambio.

Answer 2

En su código, this refiere al elemento seleccionado, no a la opción seleccionada

para referir la opción seleccionada puedes hacer esto -

$(this).find(''option:selected'').attr("name");

Answer 3

Para cualquiera que se encuentre tan tarde, como yo.

Como han dicho otros, nombre no es un atributo válido de un elemento de opción . Combinando la respuesta aceptada arriba con la respuesta de esta otra pregunta , obtienes:

$(this).find(''option:selected'').text();

Answer 4

Usar el nombre en una opción de selección no es válido.

Otros han sugerido el atributo de datos, una alternativa es una tabla de búsqueda

Aquí el "esto" se refiere a la selección por lo que no hay necesidad de "encontrar" la opción

var names = ["", "acoustic", "jazz", "acoustic_jazz", "party", "acoustic_party", "jazz_party", "acoustic_jazz_party"];
$(function() {
$(''#band_type_choices'').on(''change'', function() {
$(''.checkboxlist'').hide();
var idx = this.selectedIndex;
if (idx > 0) $(''#checkboxlist_'' + names[idx]).show();
});
});

.checkboxlist { display:none }

Choose acoustic to see the corresponding div
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="band_type_choices">
<option vlaue="0"></option>
<option value="100" name="acoustic">Acoustic</option>
<option value="0" name="jazz">Jazz/Easy Listening</option>
<option value="0" name="acoustic_jazz">Acoustic + Jazz/Easy Listening</option>
<option value="0" name="party">Party</option>
<option value="0" name="acoustic_party">Acoustic + Party</option>
<option value="0" name="jazz_party">Jazz/Easy Listening + Party</option>
<option value="0" name="acoustic_jazz_party">Acoustic + Jazz/Easy Listening + Party</option>
</select>
<div class="checkboxlist" id="checkboxlist_acoustic">
<input type="checkbox" class="checkbox keys" name="keys" value="100" />Keys<br>
<input type="checkbox" class="checkbox acou_guit" name="acou_guit" value="100" />Acoustic Guitar<br>
<input type="checkbox" class="checkbox drums" name="drums" value="100" />Drums<br>
<input type="checkbox" class="checkbox alt_sax" name="alt_sax" value="100" />Alto Sax<br>
<input type="checkbox" class="checkbox ten_sax" name="ten_sax" value="100" />Tenor Sax<br>
<input type="checkbox" class="checkbox clarinet" name="clarinet" value="100" />Clarinet<br>
<input type="checkbox" class="checkbox trombone" name="trombone" value="100" />Trombone<br>
<input type="checkbox" class="checkbox trumpet" name="trumpet" value="100" />Trumpet<br>
<input type="checkbox" class="checkbox flute" name="flute" value="100" />Flute<br>
<input type="checkbox" class="checkbox cello" name="cello" value="100" />Cello<br>
<input type="checkbox" class="checkbox violin" name="violin" value="100" />Violin<br>
</div>

Answer 5

 $(this).attr("name") 

significa el nombre de la etiqueta de selección, no el nombre de la opción.

Para obtener el nombre de la opción

 $("#band_type_choices option:selected").attr(''name'');