javascript - 如何弹出一个选择列表，并用选择更新站点？

Question

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

我应该如何处理这个问题？我不确定如何弹出选择列表。如果我让它在新标签页中弹出，我如何才能将它保存在以前的网站上？

谢谢

Answer 1

检查 this 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;
}​

希望这对你有用。