どのように選択リストをポップアップし、その選択肢でサイトを更新するのですか？

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> 

だけ1つの必須パラメータがあります。ブラウザが編集したコンテンツを投稿するURL。編集可能になり、クラス.editと要素：

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

上記のコードでは、いくつかのことを行います。編集はマウスを1回クリックするだけです。フォーム入力要素はテキストです。入力要素の幅と高さが元の要素と一致します。ユーザーが外部をクリックすると、フォームの変更が破棄されます。ユーザーが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>​ 

はJavaScript

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

希望、これはあなたのために動作します。