3


ユーザーがオプションを選択できるようにし、「名前の変更」ボタンをクリックしたときにこれの名前を変更できるようにします。 選択した の中に

an をネストしてこれを試みています。ただし、 のイベントは機能していません... 内に HTML 要素をネストする ことはできないようですが、機能は理想的です... このようなもの、順序付けられていないリストをどのような構造で実装できますか? input type = "text"optiononblurinput

selectoption

HTMLは次のとおりです。

<select id = "asdf" size = "2">
    <option>asdf</option>
    <option>qwerty</option>
</select>

<input type = "button" value = "rename" onclick = "rename();" />


...そしてここにjavascript/jQueryがあります:

function rename() {
    if ($("#asdf").length > 0) {
        var selectedText = $("#asdf").find(":selected").text();
        var selectedIndex = $("#asdf").find(":selected").index();
        var options = document.getElementById("asdf").options;

        options[selectedIndex].innerHTML =
           "<input type = 'text' id = 'field' onblur = 'setField(this.value);'" +
           "value = '" + selectedText + "' />";

        function setField(newName) {
            options[selectedIndex].innerHTML = newName;
        }
    }
}
4

3 に答える 3

0


わかりまし た。これを構造体とかなり厄介な jQuery で 実装できたことが
    わかりました。ul

CSS:

    #list {
        list-style-type: none;
    }
    .highlighted {
        background-color: #FFFF00;
    }


HTML:

<ul id = "list">
    <li>asdf</li>
    <li>qwerty</li>
<ul>

<input type = "button" value = "rename item" onclick = "renameSearch();" />


jQuery/javascript:

$("#list").on("click focus", "li", function() {
    $(this)
        .addClass("highlighted")
        .siblings().removeClass("highlighted");
});

function renameSearch() {
    $("#list li").each(function(index) {
        if ($(this).hasClass("highlighted")) {
            //alert(index + ": " + $(this).text());
            $(this).html("<input type = 'text' id = 'renameField' value = '" + $(this).text() + "' />");

            $("#renameField").focus();
            $("#renameField").select();

            $("#list li").on("focusout", "#renameField", function() {
                //alert($(this).val());
                $(this).parent().text($(this).val());
            });
        }
    });
} // end of function


jsFiddle --  http://jsfiddle.net/icampbell2/59YDF/

于 2013-07-16T00:05:41.533 に答える