선택 목록을 팝업하고 선택 사항으로 사이트를 업데이트하는 방법은 무엇입니까?

Question

DIV 컨테이너에 일부 텍스트가 있습니다. 사용자가 해당 텍스트를 클릭하면 선택 목록이 나타납니다. 사용자가 선택 목록에서 값을 선택하고 저장 버튼을 클릭하면 DIV 컨테이너가 선택 목록의 텍스트로 업데이트되어야합니다.

어떻게 접근해야합니까? 선택 목록을 팝업하는 방법을 모르겠다. 새 탭에서 팝업으로 만들면 어떻게 이전 사이트에 저장할 수 있습니까?

감사

Answer 1

당신이 jQuery를 잘 알고 있다면 당신이 강력 Jeditable라고 플러그인을 사용할 수 있습니다 그리고 당신은 그것으로 놀라운 일을 할 수 있습니다.

<div class="edit" id="div_1">Dolor</div> 
<div class="edit_area" id="div_2">Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat.</div> 

하나의 필수 매개 변수가 : 여기

몇 가지 예제 코드입니다. 브라우저가 편집 된 콘텐츠를 게시하는 URL입니다. 편집 될 클래스 .edit와 요소 :

$(document).ready(function() { 
    $('.edit').editable('http://www.example.com/save.php'); 
}); 

코드는 위의 몇 가지를 않습니다. 편집은 한 번의 마우스 클릭으로 시작됩니다. 서식 입력 요소는 텍스트입니다. 입력 요소의 너비와 높이가 원본 요소와 일치합니다. 사용자가 외부를 클릭하면 양식 변경 사항이 삭제됩니다. 사용자가 ESC에 도달하면 동일한 문제가 발생합니다. 사용자가 ENTER 브라우저를 클릭하면 save.php에 www.example.com에 텍스트가 전송됩니다.

변화를 제출, 다음과 같은 데이터가 POST 될 것입니다 : 서버 에디션 : id=elements_id&value=user_edited_content

Answer 2

확인 jsFiddle.net에 this 데모.

HTML

<div id="baseDiv">Click Me</div> 
<div id="popUpDiv"> 
    <select id="popupSelect"> 
     <option value="First">First</option> 
     <option value="Second">Second</option> 
     <option value="Third">Third</option> 
    </select> 
</div>​ 

자바 스크립트

$("#baseDiv").click(function(e) { 
    $("#popUpDiv").show(); 
}); 
$("#popupSelect").change(function(e) { 
    $("#baseDiv").html($("#popupSelect").val() + ' clicked. Click again to change.'); 
    $("#popUpDiv").hide(); 
});​ 

CSS

#popUpDiv{ 
    z-index: 100; 
    position: absolute; 
    background-color: rgba(123, 123,123, 0.8); 
    display: none; 
    top: 0; 
    left: 0; 
    width: 200px; 
    height: 300px; 
} 
#popupSelect{ 
    z-index: 1000; 
    position: absolute; 
    top: 130px; 
    left: 50px; 
}​ 

이 당신을 위해 밖으로 작동 바랍니다.