Question

我想制作一个可编辑的下拉列表，双击数据时，下拉列表应该出现并填充来自外部JS的选项，这应该是多次运行。以下是此

的HTML

<div class="tabbable">
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
            <table id='table-draggable1'>
                <tbody class="connectedSortable">
                    <tr>
                        <th>col1</th>
                        <th>col2</th>
                        <th>col3</th>
                        <th>col4</th>
                    </tr>
                    <tr>
                        <td>156</td>
                        <td>668</td>
                        <td>100.95</td>
                        <td class="master">100.95</td> //editable dropdown
                    </tr>
                    <tr>
                        <td class="desc">256</td>
                        <td>668</td>
                        <td>100.95</td>
                        <td class="master">100.95</td> // ondblclick should be editable
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

我试图使下拉列表可编辑的jquery

    $document.ready(function ()
        {
dropdown();
            $(function ()
            {
                $(".master").dblclick(function (e)
                {
                    e.stopPropagation();
                    var currentEle = $(e.target);
                    var value = $(e.target).html();
                    console.log($(e.target));
                    if ($.trim(value) === "")
                    {
                        $(currentEle).data('mode', 'add');
                    }
                    else
                    {
                        $(currentEle).data('mode', 'edit');
                    }
                    updateVal(currentEle, value);
                });
            });

            function updateVal(currentEle, value)
            {
                $(currentEle).html("<select class='master'></select>");
                var mode = $(currentEle).data('mode');
                alert(mode);
                $(".master").focus();
                $(".master").keyup(function (event)
                {
                    if (event.keyCode == 13)
                    {
                        $(this).parent().html($(this).val().trim());
                        $(".master").remove();
                    }
                });
            }
            $(document).click(function (e)
            {
                if ($(".master") !== undefined)
                {
                    if ($(".master").val() !== undefined)
                    {
                        $(".master").parent().html($(".master").val().trim());
                        $(".master").remove();
                    }
                }
            });
        }

        function dropdown()
        {
           var resp = "<option>" + 1 + "</option>"; //this should be populated in dropdown
           $(".master").html(resp);
        }
    }

    });

http://jsfiddle.net/tXakG/

Answer 1

您可以使用HTML5中的datalist标记来完成此操作。

<input type="text" name="product" list="productName"/>
<datalist id="productName">
    <option value="a">Apple</option>
    <option value="o">Orange</option>
    <option value="b">Banana</option>
</datalist>

如果双击浏览器中的输入文本，将显示带有已定义选项的列表。

使用javascript添加：数据是通过ajax从服务器获取的

http://jsfiddle.net/rajaveld/7yM6V/

否则你可以使用jquery：

你可以推荐jQuery UI。

制作可编辑的下拉列表并从外部JS填充它

1 个答案: