Javascript: get a value with jQuery and replace it.

Question

I have a gender selector, and a script that gets the value of the selected gender and pastes it on a label, but its pasting the value: "M" or "F".

<div name="userLabelDiv" id="genderUserLabelDiv">
    <label class="required">Sexo</label>    
    <label id="genderLabel">F</label> 
</div>

Now when Im trying to get this letter and replace for the actual gender, I'm missing on the js script. Could you help me?

    $("#genderLabel").html(
                    if($(this).value='F'){
                         this.value='Female';
                    }
                    if($(this).value='M'){
                         this.value='Male';
                    }
);

I know the script is probably wrong, could someone correct it please? Thank you!

Answer 1

replace every value with text()

if($(this).text()=='F'){
   $(this).text('Female');
}
if($(this).text()=='M'){
    $(this).text('Male');
}

Among a few other things

Answer 2

var gender = $('#genderLabel');
if (gender.text() == 'F') { gender.text('Female'); }
else { gender.text('Male'); }

Answer 3

To use .html() that way, you need to pass a function as the argument that returns the value you want.

Try it out: http://jsfiddle.net/FDZBJ/

$("#genderLabel").html(function(i,html) {
                           html = $.trim(html);
                           if(html == 'F') return 'Female';
                           if(html == 'M') return 'Male';
                           return html;
                       });

Answer 4

In jQuery 1.4+ you can pass a function to .text() like this:

$("#genderLabel").text(function(i, t) {
   return t == 'F' ? 'Female' : t == 'M' ? 'Male' : t;
});

This converts F to Female, M to Male and leaves anything else alone, in case new genders come up :)