Изменение текста в выпадающий список Select - jQuery

Question

Возможно, это действительно простой вопрос, но по какой-то причине мой код не работает.

По сути, если пользователь нажимает на фрагмент текста, который имеет класс контейнера .valueSD, я хочу текстизменить в поле выбора, чтобы они могли обновить его значение.

Вот пример того, что я сделал:

$('.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;   
    });
});

По какой-то причине это не работает, хотя.

Есть идеи почему?

Answer 1

Вы, вероятно, хотите это

$('.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;   
    });
});

Answer 2

Ваш код работает нормально .. но единственное, что вам нужно сделать, - это удалить ограниченный щелчок события, иначе выпадающий список будет недоступен, просто добавьте код.

$(this).unbind("click"); в функции обратного вызова, которая обрабатывает событие нажатия

Демо

Answer 3

Вы ищете идентификатор внутри функции, когда у TD есть класс,

 $('.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>'  ); });