드롭 다운 목록의 내용을 동적으로 작성 및 편집하십시오.

Question

페이지의 목록으로 전체를 드롭 다운시킬 수 있는지 궁금합니다. 드롭 다운에서 텍스트를 편집하고 다른 항목을 추가 할 수 있는지 궁금합니다. 기본적으로 드롭 다운 목록의 내용은 사용자의 몫입니다. Google 양식과 같은 프로젝트를하고 있습니다.

내가 지금 시도한 것은 표준 드롭 다운 목록입니다. 하지만 내가 달성하고자하는 것은 동적으로 옵션의 값을 편집하고 어쩌면 다른 항목을 추가 할 수 있습니다. jQuery로

<div> 
<select> 
    <option value="editable1">Editable1</option> 
    <option value="editable2">Editable2</option> 
</select> 
</div> 

Answer 1

: 여기

var i = 0; 
$('#add').bind('click', function(e){ 
    var str = '<option value="'+i+'">'; 
    if ($('#add_text').val() != ''){ 
     str += $('#add_text').val() + '</option>'; 
      $('#select').append(str); 
     $('#add_text').val(''); 
     i++; 
    }; 
}); 

$('#edit').bind('click', function(e){ 
    $('#select :selected').text($('#add_text').val()); 
    if ($('#add_text').val() != ''){ 
     $('#select :selected').text($('#add_text').val()); 
    }; 
}); 

는 바이올린 http://jsfiddle.net/Zkh9L/1/

입니다

업데이트 :이 Vasani에서 예처럼 보이지만 당신이 항목을 추가 할 수 있습니다 : 팝업 입력 http://jsfiddle.net/Zkh9L/2/

UPDATE2와 바이올린 http://jsfiddle.net/yUxr4/406/

Answer 2

확인하십시오 DEMO

텍스트를 입력하고 추가 또는 편집을 클릭하십시오.

HTML :

<select id="dropdown"> 
    <option value="editable1" id="editable1">Editable1</option> 
    <option value="editable2" id="editable2">Editable2</option> 
</select> 
<input type="text" id="element_text" /> 
<input type="button" value="Add" id="add" /> 
<input type="button" value="Edit" id="edit" /> 

JS : 사용함으로써

$("#add").click(function() { 
    var option_text = $("#element_text").val(); 
    var option_data = "<option value='"+option_text+"' id='"+option_text+"'>"+option_text+"</option>"; 
    $("#dropdown").append(option_data); 
    $("#element_text").val(""); 
}); 
$("#edit").click(function(){ 
    var option_text = $("#element_text").val(); 
    var option_data = "<option value='"+option_text+"' id='"+option_text+"'>"+option_text+"</option>"; 
    var id = $("#dropdown").val(); 
    var node = $("#"+id); 
    node.remove(); 
    $("#dropdown").append(option_data); 
    $("#element_text").val(""); 
});