更改文本输入以使用jQuery在wordpress中进行选择

Question

我正在使用WordPress模块​​abase从数据库中获取一些数据并将其发送到表单。 问题是，基本表单不允许使用选择输入。 因此，我试图将文本输入转换为选择。 我创建了function toSelect ，将元素ID和选项列表传递给该function toSelect （为了进行测试，我将元素ID放入函数定义中）。

function toSelect(itemid,valuelist) {
    var out = '';
    out += '<select id="bus311mtd_2_status" style="width:50px;">';
    for (i=0; i < valuelist.length; i++) {
        out += '<option value="'+valuelist[i]+'">'+valuelist[i]+'</option>';
    }
    out += '</select>';
    alert(out);
    $("#bus311mtd_2_status").replaceWith(out);
    //$("#bus311mtd_2_status").replaceWith('<input type="text" value="zamontowane">');
}

alert(out)提供了不错的选择输入代码，但是$("#bus311mtd_2_status").replaceWith(out)不起作用。

甚至像$("#bus311mtd_2_status").replaceWith('<input type="text" value="zamontowane">')也不起作用。

标识为bus311mtd_2_status的元素肯定存在（即，使用document.getElementById()更改其值可以正常工作）

也许jQuery不起作用？

Answer 1

您的代码对我来说似乎很好。 也许是您的函数调用。 我用了：

toSelect(null, ['a', 'b', 'c']);

itemid似乎未在函数中使用。

这是您的代码起作用的小提琴： http : //jsfiddle.net/dgrundel/Lko6aftf/

这是该函数的稍微优化的版本，它使用itemid参数：

function toSelect2(itemid,valuelist) {
    var html = '<select id="' + itemid + '" style="width:50px;"><option>' +
        valuelist.join('</option><option>') +
        '</option></select>';
    $('#' + itemid).replaceWith(html);
}

toSelect2('myInput2', ['d', 'e', 'f']);

Answer 2

感谢您的回答和优化。 我最初使用itemid，但是由于问题，我暂时将其替换为某些现有元素的id，以确保问题在其他地方。

直到第一个警报正常工作并且alert（out）会在弹出窗口中显示所有文本的所有代码：

<select id="bus311mtd_2_status" style="width:50px;"><option value="ready">ready</option><option value="awaiting">awaiting</option></select>

这按预期工作。 但是问题开始于下一行。

我想证明即使是像下面这样的简单代码也不起作用。

$("#bus311mtd_2_status").replaceWith('<input type="text" value="zamontowane">');

因此，似乎不支持jQuery。

而且我还有另一个发现：在脚本标签内不允许有空行（如果存在，则该代码将不起作用）。