jQuery 切换 - 从选择输入更改为文本输入

Question

我对使用 jQuery 和 JavaScript 还是很陌生，但这里有。我正在尝试为我的网站创建一个切换功能。有一个用于选择事件名称的输入，该名称默认显示为数据库中所有事件的下拉列表 - 但我希望有一个选项可以将其更改为手动输入并键入事件名称作为什么随心所欲。

我可以让它正常工作！但是我无法获得将输入 BACK 更改为选择框的链接。

请参阅下面的代码：

/// jQuery 代码 ///

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
    function toggleEventInput() {
       $("#EventNameDropDown")
.replaceWith('<input type="text" size="35" name="boxEvent" class="FieldInput" />');
        $("#EventNameChange")
.replaceWith('<a href="javascript:toggleEventInputBack();"> (Drop Down Input)</a>');
    }

    function toggleEventInputBack() {
       $("#EventNameDropDown")
.replaceWith('TEST');
        $("#EventNameChange")
.replaceWith('<a href="javascript:toggleEventInput();"> (Manual Input)</a>');
    }   
</script>

/// HTML 代码 ///

<table>
       <tr>
        <td class="label">Event:</td>
            <td>
                <span id="EventNameDropDown">
                <select name="boxEvent" class="FieldInput" style="width:254px;" />
                <?= $EventNameDropDownList ?>
                </select>
                </span>
                <span id="EventNameChange">
                <a href="javascript:toggleEventInput();"> (Manual Input)</a>
                </span>
            </td>
        </tr>
        <tr>
            <td class="label">Company:</td>
            <td><input type="text" size="35" name="boxEvent" class="FieldInput" /></td>
        </tr>
</table>

如上所述，当您单击指向“（手动输入）”的原始链接时，它可以正常工作并将其更改为文本框。但是，当您单击“（下拉输入）”链接时，它什么也不做。

任何帮助将不胜感激。

Answer 1

您需要使用.html() 而不是.replaceWith()。前者替换元素的内容。后者替换元素本身。通过使用.replaceWith()，您将替换包含<select> 的<span>。

Krishna 建议不要只替换 <select> 的 html，而是先将其存储在一个变量中，以便以后再放回去。

您可以将其作为数据存储在元素上，如下所示：

function toggleEventInput() {
    // Store the html for the <select>.
    $('#EventNameDropDown').data('selectHtml', $('#EventNameDropDown').html());

    $("#EventNameDropDown").html('<input type="text" size="35" name="boxEvent" class="FieldInput" />');
    $("#EventNameChange").html('<a href="javascript:toggleEventInputBack();"> (Drop Down Input)</a>');
}

function toggleEventInputBack() {
    $("#EventNameDropDown").html($('#EventNameDropDown').data('selectHtml'));
    $("#EventNameChange").html('<a href="javascript:toggleEventInput();"> (Manual Input)</a>');

    // Clear the html for the <select>. We will get it again later if we need it.
    $('#EventNameDropDown').data('selectHtml', '');
}

Answer 2

最好在 div/span 中添加下拉列表，并在单击切换按钮时，将 div/span 中的数据存储到变量中，然后用输入框替换内容。在下一次切换时，用变量中的数据替换 div/span。状态变量 0/1 将有助于切换数据..