Dojo_getting-started:Getting Selective with Dijit文章的三个例子代码和效果-CSDN博客

本文链接：https://blog.csdn.net/superfreak/article/details/120899840

dojo的官方网站例子加载的时候不是很顺畅，我自己复制的代码，实现了该文章的三个例子。

代码和图分别如下。

dijit/form/Select

例子1代码：



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Demo: Dijit Select</title>
	<link rel="stylesheet" href="css/demo.css" media="screen">
	<link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
</head>
<body class="claro">
<div style="width:50%;">
	<div style="width:50%;float: left;">
		<h1>dijit/form/Select</h1>
		<label for="stateSelect">State:</label>
		<select id="stateSelect" data-dojo-type="dijit/form/Select" name="stateSelect"
				data-dojo-props="
						onChange: function(value){
							document.getElementById('value').innerHTML = value;
							document.getElementById('displayedValue').innerHTML = this.get('displayedValue');
						}">
			<option value="" selected="selected">Select a state</option>
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option value="CA">California</option>
		</select>
	</div>
	<div style="width:50%;float: right;"><h1>Values:</h1>
		<div><strong>value:</strong> <span id="value"></span></div>
		<div><strong>displayedValue:</strong> <span id="displayedValue"></span></div>
		<h5>*Note how the submitted value will be the internal option value</h5>
	</div>
</div>

<!-- load dojo and provide config via data attribute -->
<script src="dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
<script>
	require(["dijit/form/Select", "dojo/parser"]);
</script>
</body>
</html>

例子1效果图

dijit/form/FilteringSelect



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Demo: Dijit FilteringSelect</title>
	<link rel="stylesheet" href="css/demo.css" media="screen">
	<link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
</head>
<body class="claro">
<div style="width:50%;">
	<div style="width:50%;float: left;">
		<h1>FilteringSelect</h1>
		<label for="stateSelect">State:</label>
		<select id="stateSelect" name="stateSelect" data-dojo-type="dijit/form/FilteringSelect"
				data-dojo-props="
						value: '',
						placeHolder: 'Select a State',
						onChange: function(value){
							document.getElementById('value').innerHTML = value;
							document.getElementById('displayedValue').innerHTML = this.get('displayedValue');
						}">
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option value="CA">California</option>
		</select>
	</div>
	<div style="width:50%;float: right;"><h1>Values:</h1>
		<div><strong>value:</strong> <span id="value"></span></div>
		<div><strong>displayedValue:</strong> <span id="displayedValue"></span></div>
		<h5>*Note how the submitted value will be the internal option value</h5>
	</div>
</div>

<!-- load dojo and provide config via data attribute -->
<script src="dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
<script>
	require(["dijit/form/FilteringSelect", "dojo/parser"]);
</script>
</body>
</html>

效果图如下

这个就是增加了过滤的效果，输入c 会自动切换到California。

dijit/form/ComboBox



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Demo: Dijit ComboBox</title>
	<link rel="stylesheet" href="../../_common/demo.css" media="screen">
	<link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
</head>
<body class="claro">
<div style="width:50%;">
	<div style="width:50%;float: left;">
		<h1>dijit/form/ComboBox</h1>
		<label for="stateSelect">State:</label>
		<select id="stateSelect" name="stateSelect" data-dojo-type="dijit/form/ComboBox"
				data-dojo-props="
						value: '',
						placeHolder: 'Select a State',
						onChange: function(value){ document.getElementById('value').innerHTML = value; }">
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option value="CA">California</option>
		</select>
	</div>
	<div style="width:50%;float: right;"><h1>Submitted Value: </h1>
		<div id="value"></div>
		<h5>*Note how the submitted value will be the displayed value</h5>
	</div>
</div>
<!-- load dojo and provide config via data attribute -->
<script src="dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
<script>
	require(["dijit/form/ComboBox", "dojo/parser"]);
</script>
</body>
</html>

效果图如下：