将选择转换为输入而不是跨浏览器答案

【问题标题】：convert a select to an input not cross-browser将选择转换为输入而不是跨浏览器
【发布时间】：2012-09-26 19:17:58
【问题描述】：

我有这个标记

<select id="helpamount" name="helpamount"><?= get_texto_clave('amount')?>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="-1" class="convertoinput">more</option>
</select>

这段代码尝试将其转换为输入

$('body').on('click','.convertoinput',function(){
    $(this).parent().after('<input type="number" id="'+$(this).parent().attr('id')+'" name="'+$(this).parent().attr('id')+'" value="" placeholder="Especifica un valor numerico" /> ');
    $(this).parent().remove();
});

知道为什么这只在 Firefox 中有效吗？

【问题讨论】：

绑定到select元素的change事件然后检查选中的值可能更可靠。
你使用$(this).parent的次数太多了，迫使jQuery从选择元素创建一个对象，然后找到它的父元素......这非常浪费而且很慢......只是做@ 987654324@并重复使用它

标签： javascript jquery select input cross-browser

【解决方案1】：

跨浏览器->

$('body').on('change','#helpamount',function(){
    if($(this).val() == -1){
        $(this).after('<input type="number" id="'+$(this).prop('id')+'" name="'+$(this).prop('id')+'" value="" placeholder="Especifica un valor numerico" /> ');
        $(this).remove();
    }
    $('body').off('change', '#helpamount');
});

jsFiddle example.

【讨论】：

拜托，不要浪费 $(this) 和所有的东西：D
@Toni Michel Caubet -- 您可以在 jsFiddle 示例中看到它运行良好。究竟是什么“失败”？
似乎复制了一些奇怪的字符..：S，抱歉，效果很好！

【解决方案2】：

工作代码：

$('body').on('change','#helpamount',function(){
    var
        e = $(this),
        eid = e.attr('id');

    if (e.val() == e.find('option.convertoinput').val()) {
        e.after('<input type="number" id="'+eid+'" name="'+eid+'" value="" placeholder="Especifica un valor numerico" />').remove();
        $('body').off('change', '#helpamount');
    }
});

jsFiddle：http://jsfiddle.net/zSbUA/1/

【讨论】：

此外，这将导致在“更改”新创建的输入时创建几个元素，因为它们共享完全相同的 ID，请在我的回答中查看我为什么使用 .off() 方法。跨度>
优秀的评论，我没有想到...我会删除这个答案，但是你如何更新你的重新使用 $(this) 作为存储变量？ :)