validar - validacion de formularios con javascript ejemplos

Encontrar el nombre de la opción seleccionada usando jQuery

Question

He creado una función jquery / ajax que actualiza #courses, enviando #val''s .val () y .text (), específicamente de la que está seleccionada, así:

$(''#selling #fos'').change(function() {
    $.post(''/ajax/courses'',
        {
            fos_id: $(''#selling #fos'').val(),
            name: $(''#selling #fos :selected'').text()
        },
    function(data) {
        $(''#selling #courses'').html(data);
    });
});

¿Cómo extiendo esta función para que use ''esto'', permitiéndome reutilizar esta función varias veces en la misma página? Estoy atrapado porque no puedes usar el name: $(this + '' :selected'').text() .

Answer 1

Sin jQuery

Es bastante simple hacer esto sin jQuery. Dentro de un detector de eventos de change , se puede acceder a la opción seleccionada usando this.options[this.selectedIndex] . Desde allí, puede acceder a las propiedades de value / text del elemento de opción seleccionado.

Ejemplo aquí

var select = document.querySelector(''#select'');

select.addEventListener(''change'', function (e) {
    var selectedOption = this.options[this.selectedIndex];

    console.log(selectedOption.value);
});

var select = document.querySelector(''#select'');

select.addEventListener(''change'', function (e) {
    var selectedOption = this.options[this.selectedIndex];
    
    alert(selectedOption.value);
});

<select id="select">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>

Answer 2

Creo que lo que estás buscando es .filter()

name: $(this).filter('':selected'').text()

Devolverá una cadena vacía si no está seleccionada

¡Buena suerte!

Editar :

No vi que Brett tenía un espacio antes de ": seleccionado", lo que significa que está buscando un hijo. La sugerencia de Stefanvds de usar find () funcionará bien. filter () comprueba si el dom actual es ": selected" mientras que find () buscará los elementos secundarios en todos los niveles. También puede usar .children() si sabe que el .children() seleccionado que busca es un hijo directo de "this", ya que es mucho más eficiente, ya que solo está buscando un nivel de niños.

name: $(this).children('':selected'').text()

Answer 3

Esto debería funcionar:

$("#"+$(this).attr("id")+" :selected")

no es bonito pero hace el truco :)

o esto funcionará:

$(this).find(":selected").text()

Answer 4

También puede usar el segundo argumento de jQuery (contexto) para evitar el innecesario "filtro", "buscar", "niños", etc. Esto permite que su selector sea algo como:

$(''select[name="myselect"]'').on(''change'',function(){
    var selectedOptionName = $(''option:selected'',this).text();
    console.log(selectedOptionName);
});