
|
編程(Programming)是編定程序的中文簡稱,就是讓計算機代碼解決某個問題,對某個計算體系規(guī)定一定的運算方式,使計算體系按照該計算方式運行,并最終得到相應結果的過程。為了使計算機能夠理解(understand)人的意圖,人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機,使得計算機能夠根據人的指令一步一步去工作,完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。 【實例名稱】 JS代碼實現從一個下拉列表往另一個下拉列表添加內容 【實例描述】 在網頁中經常需要用戶選擇一些類似的信息(如個人愛好),為了明確用戶的選擇,通常用列表列出幾乎所有的愛好,然后用戶選擇自己的愛好內容添加到另外一個列表中。本例就是實現這種選擇效果。 【實例代碼】 <script language="JavaScript">
//設計字符對象的trimEnd方法
String.prototype.trimEnd = function(trimString) {
var re = new RegExp(trimString+"*$", "g");
return this.replace(re, "");
};
//設計數組對象的indexof方法
Array.prototype.indexOf = function(itemValue) {
var nIndex = -1;
for (var i=0; i<this.length; i++)
{
if (this[i] == itemValue) nIndex = i;
}
return nIndex;
};
//定義變量-變量為當前文檔中的控件對象
var oSrc = document.getElementById("oldSelect");
var oTarget = document.getElementById("newSelect");
var oCopy = document.getElementById("btnMove");
//定義按鈕的click事件
oCopy.onclick = function() {
var aSelectedIndexes = getSelectedIndexes(oSrc);
for (var i=0; i<aSelectedIndexes.length; i++)
{
var oOption = document.createElement("OPTION");
oOption.text = oSrc.options[aSelectedIndexes[i]].text;
oOption.value = oSrc.options[aSelectedIndexes[i]].value;
oTarget.options.add(oOption);
}
};
//獲取源下拉列表中被選擇的內容
function getSelectedIndexes(oSrc)
{
var aSelectedIndexes = new Array();
for (var i=0; i<oSrc.options.length; i++)
{ if (oSrc.options[i].selected)
aSelectedIndexes[aSelectedIndexes.length] = i;}
return aSelectedIndexes;}/
/單擊源下拉列表的事件oSrc.onclick = function()
{ this.selectedIndexes = getSelectedIndexes(this);
if (this.selectedIndexes.length == 1)
this.options[this.selectedIndexes].selected = false;};
//改變源下拉列表選擇的事件
oSrc.onchange = function() {var j = this.selectedIndexes.
indexOf(this.selectedIndex); if (j > -1) { this.options
[this.selectedIndex].selected = false;
this.selectedIndexes.splice(j, 1); }
if (this.selectedIndexes.length > 0)
{ var nSelectedIndex;
for (var i=0; i<this.selectedIndexes.length; i++){
nSelectedIndex = parseInt(this.selectedIndexes[i]);
this.options[nSelectedIndex].selected = true;}}};
</script></html>
【運行效果】
【難點剖析】 本例的難點是如何判斷下拉列表的選擇內容,還有如何動態(tài)添加到另外一個下拉列表中。判斷選擇列表的內容需要通過列表索引獲得,本例使用了方法“getselectedIndexes”。動態(tài)在下拉列表中創(chuàng)建元素,使用了DoM的方法“createElement”來創(chuàng)建“optiOn”元素,最后動態(tài)地為此元素賦值。 【源碼下載】 本實例JS代碼下載
使用編程語言寫的程序,由于每條指令都對應計算機一個特定的基本動作,所以程序占用內存少、執(zhí)行效率高。 |
溫馨提示:喜歡本站的話,請收藏一下本站!