alex alex - 4 months ago 21
Javascript Question

Changing Text into dropdown

I have a big grid of values. At first, each values was a drop down. But it was very slow to load (+15 sec).
So I would like to use text in my grid (a regular table ) and use a dropdownlist on the double click of the text .
Is this possible ?
Also, is it possible to use a telerik drop down ?

Here's an example : A grid containing color (ex: blue, blue, red, yellow....).
When double click on the word, a dropdown will replace the selected text. The dropdown will contain all available color : blue, red, yellow. After that, when the value is selected, the drop down would disapear and the text will display the new value.

So far, I got this :

$(function () {
$('.colorGrid').dblclick(function () {
$(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) {

I'm close to my goal. Now I need to put back the result of the selected in a td tag, and the select must disappear! The change select function is never call. Does anyone know why?


If it takes +15 seconds, then you definitely have to go for AJAX or hardcoding the dropdownvalues in javascript strings.

As told by MrOBrian, I can't provide you the code solely based on your one or two line problem. You have to upload your existing problem code to get a solution from here. However I can give you an idea.

Say this is your colour block

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

You have to add an onclick handler.


  //call your ajax or get values from hard coded javascript string