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

当TD有一个类

时，你正在函数内搜索一个ID

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

Answer 2

你可能想要这个

$('.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 3

您的代码似乎工作正常.. 但您唯一需要做的就是删除有界事件，否则只需添加代码就可以取消选择下拉列表。

处理click事件的回调函数中的

$(this).unbind("click");

<强> Demo

将文本更改为选择下拉列表 - jQuery

3 个答案: