將文本更改爲下拉列表

-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

將文本更改爲下拉列表

回答

相關問題