将文本更改为下拉列表

-1

我有一个大的网格值。起初，每个值都是下降的。但加载速度非常慢（+15秒）。所以我想在我的网格中使用文本（常规表格）并在文本的双击上使用下拉列表。这可能吗？另外，是否可以使用telerik下拉？将文本更改为下拉列表

下面是一个例子：一个包含颜色的网格（例如：蓝色，蓝色，红色，黄色....）。双击该单词时，下拉菜单将替换选定的文本。下拉菜单将包含所有可用的颜色：蓝色，红色，黄色。之后，当选择该值时，下拉将消失，文本将显示新值。

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

$(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标记中，并且选择必须消失！更改选择功能从不打电话。有谁知道为什么？

来源

2012-08-01 alex

这可能吗？绝对。 – kevin628 2012-08-01 21:05:56

您现在可以向我们展示您的html和javascript吗？ – Undefined 2012-08-01 21:06:01

的基本思路是将潜在下拉的所有'东西'放到一个块中并隐藏它，并将onClick添加到每个这样的块中，这会将值从隐藏变为可见。然后，如果你想减少加载时间，只需在用户点击块 – 2012-08-01 21:12:02

如果需要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); 


});

来源

2012-08-01 21:36:07 afrin216

嗨Afrin。这正是我所期待的。我没有提供代码，因为解释所有内容需要时间。颜色示例与我想要的相似。还有一件事，你会如何在你的示例中使用telerik下拉菜单而不是常规选择？另外，当用户选择他的价值时，你会如何放回文本格式？ Thks – alex 2012-08-02 00:08:23

我接近了我的目标。现在我需要将选择的结果放回到td中，并且选择必须消失！ – alex 2012-08-02 03:25:30

@alex - 你可以做一件事。 $（“。color-block”）。children（“select”）.val（）会得到你的值。将此添加到div。所有块都隐藏起来。在click（）处理程序上执行此操作。这样，在你点击服务之前。所有选择块的值将被放入td中。然后隐藏td。 – afrin216 2012-08-02 10:42:14

将文本更改为下拉列表

回答

相关问题