DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Dojo獲取下拉框的文本和值實例代碼
Dojo獲取下拉框的文本和值實例代碼
編輯:關於JavaScript     

Dojo

Dojo是一個用javascript語言實現的開源DHTML工具包。它是在幾個項目捐助基礎上建立起來的(nWidgets,Burstlib,f(m)),這也是為什麼叫它a"unified"toolkit的原因。Dojo的目標是解決開發DHTML應用程序遇到的那些,長期存在、歷史問題(historical problems with DHTML)。跨浏覽器問題。

1、問題背景

這裡有一個下拉框,其中選項為一年四季,選中後打印下拉框的值和文本

2、實現源碼

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>dojo-獲取下拉框的值和文本</title> 
<link rel="stylesheet" href="js/dojo/dijit/themes/claro/claro.css" /> 
<script type="text/javascript" src="js/jquery-1.12.4.js"></script> 
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> 
<style> 
#season{ 
width:200px; 
} 
</style> 
<script> 
dojoConfig={async:true,parseOnLoad:true} 
</script> 
<script> 
require([ 
"dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/domReady!" 
], function(Memory, FilteringSelect){ 
var seasonStore = new Memory({ 
data: [ 
{name:"春季", id:"spring"}, 
{name:"夏季", id:"summer"}, 
{name:"秋季", id:"autumn"}, 
{name:"冬季", id:"winter"} 
] 
}); 
var seasonSelect = new FilteringSelect({ 
id: "season", 
name: "season", 
value: "spring", 
store: seasonStore, 
searchAttr: "name" 
}, "season").startup(); 
}); 
</script> 
</head> 
<body class="claro"> 
<input id="season" /><br> 
<button id="valueBtn" onclick="alert(dijit.byId('season').get('value'))">獲取下拉框value</button> 
<button id="textBtn" onclick="alert(dijit.byId('season').get('displayedValue'))">獲取下拉框text</button> 
</body> 
</html> 

3、實現結果

(1)初始化時

(2)點擊“獲取下拉框value”按鈕

(3)點擊“獲取下拉框text”按鈕

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved