Question

我是使用jQuery和JavaScript的新手，但是这里有。我正在尝试为我的网站创建一个切换功能。有一个输入可以选择事件名称，默认显示为数据库中所有事件的下拉列表 - 但是我希望有一个选项可以将其更改为手动输入并键入事件的名称作为内容你想要的吗。

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

请参阅下面的代码：

/// jQuery Code ///

<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

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

Answer 2

您需要使用.html()代替.replaceWith()。前者替换元素的内容。后者取代了元素本身。使用.replaceWith()即可替换包含<span>的{{1}}。

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

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

<select>

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

2 个答案: