如何弹出选择列表，并用所选内容更新站点？
如何弹出选择列表，并用所选内容更新站点？
提问于 2012-02-20 17:18:47
我在DIV容器中有一些文本。当用户单击该文本时，我希望有一个选择列表弹出窗口。当用户从选择列表中选择一个值并单击保存按钮时，应使用选择列表中的文本更新DIV容器。
我应该如何处理这个问题？我不确定如何使选择列表弹出。如果我将其弹出到新的选项卡中，如何将其保存到以前的站点？
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-02-20 17:25:38
如果你熟悉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时，浏览器将文本提交到位于www.example.com的save.php。
当提交更改时，以下数据将被POST:ed到服务器：id=elements_id&value=user_edited_content
Stack Overflow用户
发布于 2012-02-20 17:29:53
在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;
}希望这对你有用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9358643
复制相关文章
相似问题
腾讯云开发者
