0

我对使用 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>

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

任何帮助，将不胜感激。

4

2 回答 2

0

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

于 2013-03-02T18:19:25.033 回答
0

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

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

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

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', '');
}
于 2013-03-02T19:07:03.037 回答