0

第一次在这里发帖。

我有一个理论长度的父 div 列表，n。在这些父项中是“子”div，分别包含一个下拉选择和一个编辑按钮。

单击编辑按钮后，我想将选择下拉菜单更改为标准文本输入字段。

我查看了许多示例，但无法找到最合适的解决方案。也许将编辑按钮与选择下拉菜单放在同一个 div 中会更好？

事件处理程序似乎也存在问题。建议将不胜感激。谢谢。

下面的 HTML：

<html>
<body>

<div class="test">

    <div class="choose">
        <select class = "tag"><option value='gain'>gain</option><option value='share'>share</option><option value='bring'>bring</option>
    </select>
    </div>

    <div class="edit-button">
        <a href="#" data-action="edit">edit</a>
    </div>

</div>

<div class="test">

    <div class="choose">
        <select class = "tag"><option value='gain'>gain</option><option value='share'>share</option><option value='bring'>bring</option>
    </select>
    </div>

    <div class="edit-button">
        <a href="#" data-action="edit">edit</a>
    </div>

</div>

<div class="test">

    <div class="choose">
        <select class = "tag"><option value='gain'>gain</option><option value='share'>share</option><option value='bring'>bring</option>
    </select>
    </div>

    <div class="edit-button">
        <a href="#" data-action="edit">edit</a>
    </div>

</div>

</body>
</html>

和 jQuery：

<script type="text/javascript" src="jquery-1.6.4.js"></script>


<script type='text/javascript'>
$(document).ready(function() {
var multiTags = $("#multi");

        function handler(e) {
            // get the element which trigged the event
            var jqEl = $(e.currentTarget);

            // get parent div
            var tag = jqEl.parent();

            // check which action we should perform
            switch (jqEl.attr("data-action")) {

            case "edit":

                var tag = tag.parent();
                $(this).tag.html('<input type="text" id="something"/>');

                break;

            }

            return false;
        }

    multiTags.find("a").live("click", handler);
});



</script>
4

1 回答 1

0

那这个呢：

$(".edit-button").on("click", "a[data-action=edit]", function() {
    var testDiv = $(this).parent().parent();
    var selectValue = testDiv.find(".choose").find("select").val();
    var input = "<input name='' value='" + selectValue + "'/>";
    testDiv.find(".choose").html(input);
});

JSFiddle：http: //jsfiddle.net/WxPPR/

于 2013-11-03T06:52:13.900 回答