Changing text into Select dropdown list - jQuery

Question

This maybe a really simple question but for some reason my code isn't working.

Basically, if a user clicks on a piece of text which has the container class of .valueSD, I want the text to change into a select box so they can update the value of it.

Here is an example of what I did:

$('.valueSD').click(function(){
    $('.valueSD').html( function(){
        var monthDrop = '<td class="valueSD">'+
            '<select name="date-month">'+
                '<option name="01">January</option>'+
                '<option name="02">February</option>'+
                '<option name="03">March</option>'+
                '<option name="04">April</option>'+
                '<option name="05">May</option>'+
                '<option name="06">June</option>'+
                '<option name="07">July</option>'+
                '<option name="08">August</option>'+
                '<option name="09">September</option>'+
                '<option name="10">October</option>'+
                '<option name="11">November</option>'+
                '<option name="12">December</option>'+
            '</select>'+
        '</td>';

        console.log( monthDrop );

        return monthDrop;   
    });
});

For some reason it doesn't work though.

Any ideas why?

You can pass a string directly to the html() function, like $('#valueSD').html('<td class... etc etc'); — cambraca
– cambraca, Commented Jan 26, 2012 at 15:12
Sorry that seems to work fine. I have no idea why it doens't work locally. Thanks for your time all! — DarkMantis
– DarkMantis, Commented Jan 26, 2012 at 15:22

Baz1nga · Accepted Answer · 2012-01-26 15:41:26Z

1

Your code seems to work fine.. but the only thing that you need to do is remove the bounded event click else the dropdown will be unselectable just add the code.

$(this).unbind("click"); in the callback function that handles the click event

Demo

answered Jan 26, 2012 at 15:41

Baz1nga

15.6k3 gold badges38 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DarkMantis Over a year ago

I think I love you xD I was looking for a while to see why that wasn't working :P Thanks again!

Rahul · Accepted Answer · 2012-01-26 15:13:07Z

You are searching for an ID inside a function , when the TD has a class,

 $('.valueSD').click(function(){
$('.valueSD').html( 
    '<td class="valueSD">'+
        '<select name="date-month">'+
            '<option name="01">January</option>'+
            '<option name="02">February</option>'+
            '<option name="03">March</option>'+
            '<option name="04">April</option>'+
            '<option name="05">May</option>'+
            '<option name="06">June</option>'+
            '<option name="07">July</option>'+
            '<option name="08">August</option>'+
            '<option name="09">September</option>'+
            '<option name="10">October</option>'+
            '<option name="11">November</option>'+
            '<option name="12">December</option>'+
        '</select>'+
    '</td>'  ); });

aziz punjani · Accepted Answer · 2012-01-26 15:16:22Z

You probably want this

$('.valueSD').click(function(){
    $(this).html( function(){
        var monthDrop = '<td class="valueSD">'+
            '<select name="date-month">'+
                '<option name="01">January</option>'+
                '<option name="02">February</option>'+
                '<option name="03">March</option>'+
                '<option name="04">April</option>'+
                '<option name="05">May</option>'+
                '<option name="06">June</option>'+
                '<option name="07">July</option>'+
                '<option name="08">August</option>'+
                '<option name="09">September</option>'+
                '<option name="10">October</option>'+
                '<option name="11">November</option>'+
                '<option name="12">December</option>'+
            '</select>'+
        '</td>';

        console.log( monthDrop );

        return monthDrop;   
    });
});

Collectives™ on Stack Overflow

Changing text into Select dropdown list - jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related