将文本更改为下拉菜单

Question

我有一个很大的价值观。起初，每个值都是一个下拉列表。但加载速度非常慢（+15 秒）。 所以我想在我的网格（一个常规表格）中使用文本，并在双击文本时使用下拉列表。 这可能吗 ？ 另外，是否可以使用 Telerik 下拉菜单？

这是一个示例：包含颜色的网格（例如：蓝色、蓝色、红色、黄色......）。 双击单词时，下拉菜单将替换所选文本。下拉列表将包含所有可用的颜色：蓝色、红色、黄色。 After that, when the value is selected, the drop down would disapear and the text will display the new value.

到目前为止，我得到了这个：

$(function () {
    $('.colorGrid').dblclick(function () {
         debugger;
        $(this).html("<select class=\"resultMenu\" id=\"resultMenuID\" size=\"1\"></select>");
        $(this).children("select").append('<option value=1>Black</option>');
        $(this).children("select").append('<option value=2>Red</option>');
        $(this).children("select").append('<option value=3>Blue</option>');
        $(this).children("select").append('<option value=4>Yellow</option>');
    });
    $('#resultMenuID').change(function (event) {
        debugger;
        $(this).html("<td>test</td>");
    });
});

我已经接近我的目标了。现在我需要将选择的结果放回 td 标记中，选择必须消失！从不调用更改选择功能。有谁知道为什么？

Answer 1

如果需要 +15 秒，那么你肯定要选择 AJAX 或 hardcoding the dropdownvalues in javascript strings.

正如 MrOBrian 所说，我不能仅根据您的一两行问题为您提供代码。您必须上传现有的问题代码才能从此处获得解决方案。不过我可以给你一个想法。

说这是你的色块

<div id="colour-block-list">
    <div id="red-block" class="colour-block">
    Red
    </div>
</div>

您必须添加一个 onclick 处理程序。

$(".colour-block").click(function(){

  //call your ajax or get values from hard coded javascript string
   $(this).html("<select></select>");
   $(this).children("select").append(list_of_options);


});