0

私はjQueryとJavaScriptを使用するのは初めてですが、ここに行きます。Web サイトのトグル機能を作成しようとしています。データベース内のすべてのイベントのドロップダウン リストとしてデフォルトで表示されるイベントの名前を選択する入力がありますが、手動入力に変更してイベントの名前を入力するオプションが必要です。いつでも。

私はこれをうまく機能させることができます！ただし、入力を選択ボックスに変更して機能させるためのリンクを取得できません。

以下の私のコードを参照してください：

/// 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><select>

クリシュナは、 の 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 に答える