Problemas al usar jQuery para obtener el texto de opción para una selección

What I am trying to do is replicate a form interaction experience I have seen somewhere before...

When you click on 'text' it becomes a text field for the user to edit the text.

label: text (click) label: input[text]. Then blah.change(){ submit };

$('#basicinfo div').click(function(){
    $('#basicinfo select').hide();
    $('#basicinfo div').show();
    $(this).hide();
    $(this).siblings('select').show();
});
$('#basicinfo select').blur(function(){
    $('#basicinfo select').hide();
    $('#basicinfo div').show();
});
$('#basicinfo select').change(function(){
    $(this).siblings('div').html(***$(this).text()***);
    $('#basicinfo').submit();
});

<form id="basicinfo">
    <label>Gender</label> <div>Male</div>
    <select name="1">
        <option value="1">Male</option>
        <option value="2">Female</option>
    </select>
    <label>Age</label> <div>23years</div>
    <select name="2">
        <option value="21">21 years</option>
        <option value="22">22 years</option>
        <option value="23">23 years</option>
    </select>
</form>

Using .val() or .text() haven't worked, hopefully someone will know what I need :)

PS. I tried $(this+" option:selected").text() but didn't work.

preguntado el 31 de julio de 12 a las 12:07

3 Respuestas

PS. I tried $(this+" option:selected").text() but didn't work

this is an object and not a string. try

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

Also I don't know if and when the blur event gets triggered in different browsers but I imagine it's inconsistent.

I personally would use seperate "confirm" and "cancel" buttons so the user can decide when to save or not.

Respondido 31 Jul 12, 13:07

Thank you! :) I will look at the .blur() - Simon Hughes

Prueba esto - http://jsfiddle.net/tQxmN/1/

$('#basicinfo select').on("change", function(){
    alert( $(this).find("option:selected").text() );
});​

Respondido 31 Jul 12, 13:07

$('#basicinfo select').change(function()
{
    var optionValue = $(this).find("option:selected").text();

    $(this).siblings('div').html( optionValue );

    $('#basicinfo').submit();
});

Respondido 31 Jul 12, 13:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.