텍스트를 드롭 다운으로 변경

Question

큰 격자 값이 있습니다. 처음에는 각 값이 드롭 다운되었습니다. 하지만로드가 매우 느립니다 (+15 초). 그래서 그리드 (일반 테이블)에서 텍스트를 사용하고 텍스트 더블 클릭시 드롭 다운 목록을 사용하고 싶습니다. 이것이 가능합니까? 또한 드롭 다운을 사용할 수 있습니까?

다음은 예입니다. 색상이 들어있는 격자 (예 : 파란색, 파란색, 빨간색, 노란색 ...). 단어를 두 번 클릭하면 선택한 텍스트가 드롭 다운으로 바뀝니다. 드롭 다운에는 사용 가능한 모든 색상 인 파란색, 빨간색, 노란색이 포함됩니다. 그런 다음 값을 선택하면 드롭 다운이 사라지고 텍스트에 새 값이 표시됩니다.

$(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>"); 
    }); 
}); 

나는 내 목표에 가까운 해요 :

지금까지, 나는이 있어요. 이제 선택한 태그의 결과를 태그에 다시 넣어야하고 select는 사라져야합니다! 변경 선택 기능은 절대 호출되지 않습니다. 아무도 이유를 아나요? 이 15초 걸리는 경우

Answer 1

, 당신은 확실히 MrOBrian가 말했듯이 AJAX 또는 hardcoding the dropdownvalues in javascript strings.

위해 가야, 나는 당신에게 전적으로 귀하의 하나 개 또는 두 개의 라인 문제에 따라 코드를 제공 할 수 없습니다. 여기에서 해결책을 얻으려면 기존 문제 코드를 업로드해야합니다. 그러나 나는 당신에게 아이디어를 줄 수있다.

당신은 온 클릭 핸들러를 추가해야이 색상 블록

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

말한다.

$(".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); 


});