Geek Answers Handbook

How to open the selected list and update the site using the selection?

I have text in a div container. When the user clicks on this text, I would like to have a popup list box. When the user selects a value from the selection list and presses the save button, the DIV container should be updated with text from the selection list.

How do I approach this? I'm not sure how to make the selection list pop up. If I close it on a new tab, how can I save it on the previous site?

thank

+5
source share
2 answers

If you are familiar with jQuery, you can use a plugin called Jeditable , it is powerful, and you can do awesome things with it.

Here is a sample code:

<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, .

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

: .edit . . - . . , . , ESC. ENTER save.php www.example.com.

POST: ed :  id=elements_id&value=user_edited_content

+3

jsFiddle.net.

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;
}​

, .

+10
source

More articles:


All Articles