javascript - 将选择转换为输入而不是跨浏览器

Question

我有这个标记

<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 中有效吗？

Answer 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 示例。

Answer 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/