如何彈出選擇列表，並用選擇更新網站？

我在DIV容器中有一些文字。當用戶點擊該文本時，我想要彈出選擇列表彈出窗口。當用戶從選擇列表中選擇一個值並單擊一個保存按鈕時，應該使用選擇列表中的文本更新DIV容器。如何彈出選擇列表，並用選擇更新網站？

我該如何解決這個問題？我不知道如何使選擇列表彈出。如果我讓它在新標籤中彈出，我如何將它保存在以前的網站上？

感謝

2012-02-20 Kenci

如果您熟悉使用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.php在www.example.com。

當提交的變化，以下數據將POST：ED服務器： id=elements_id&value=user_edited_content

來源

2012-02-20 09:25:37 bodi0

不錯。它有「內聯選擇」。我會看看:) – Kenci 2012-02-20 09:29:56

jQuery有很多類似的插件，我個人使用這個插件，因爲它強大而靈活，易於使用;） – bodi0 2012-02-20 09:41:09

檢查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; 
}

希望這個作品送給你。

來源

2012-02-20 09:29:52

如何彈出選擇列表，並用選擇更新網站？

回答

相關問題