更改文本輸入以使用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。

而且我還有另一個發現：在腳本標簽內不允許有空行（如果存在，則該代碼將不起作用）。