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

【问题标题】：Changing text into Select dropdown list - jQuery将文本更改为选择下拉列表 - jQuery
【发布时间】：2012-01-26 15:08:12
【问题描述】：

这可能是一个非常简单的问题，但由于某种原因我的代码无法正常工作。

基本上，如果用户单击具有 .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;   
    });
});

由于某种原因，它不起作用。

有什么想法吗？

【问题讨论】：

可以直接将字符串传递给html()函数，比如$('#valueSD').html('<td class... etc etc');
jsfiddle.net/tV2Pf/1 有 JSFiddle :)
抱歉，这似乎工作正常。我不知道为什么它在本地不起作用。感谢您的宝贵时间！
确保在本地检查 js 错误。

标签： jquery select input

【解决方案1】：

您的代码似乎运行良好.. 但是您唯一需要做的就是删除有界事件单击，否则下拉菜单将无法选择，只需添加代码即可。

处理点击事件的回调函数中的$(this).unbind("click");

Demo

【讨论】：

我想我爱你 xD 我一直在寻找为什么这不起作用：P 再次感谢！

【解决方案2】：

你在函数内部搜索一个ID，当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>'  ); });

【讨论】：

【解决方案3】：

你可能想要这个

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

【讨论】：