如何弹出选择列表,并使用选择更新网站？

Question

我在DIV容器中有一些文本.当用户单击该文本时,我希望有一个选择列表poppup.当用户从选择列表中选择一个值并单击一个保存按钮时,应使用选择列表中的文本更新DIV容器.

我该怎么办呢？我不知道如何弹出选择列表.如果我在新选项卡中弹出它,我如何将其保存在以前的网站上？

谢谢

Answer 1

在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;
}?

希望这对你有用.

Answer 2

如果您熟悉 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。

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

上面的代码做了几件事：具有类的元素.edit变得可编辑。单击鼠标即可开始编辑。表单输入元素是文本。输入元素的宽度和高度与原始元素匹配。如果用户单击表单外部，则更改将被丢弃。如果用户点击 ，也会发生同样的情况ESC。当用户点击ENTER浏览器时，将文本提交到save.phpat www.example.com。

提交更改时，以下数据将被POST发送到服务器： id=elements_id&value=user_edited_content