vue父子組件傳值，option 和onclick，select,@image()@change，商品管理【詩書畫唱】
'@image()',在mockjs中是用來生成隨機圖片的。
目錄：
例子1：熟練完成單頁面VUE演示程序代碼。（代碼等部分見例子7）
當綁定一個屬性的時候用v-bind，比如綁定url屬性的時候用v-bind:url，但是v-bind:url等等是可以簡寫成:url的（v-bind:可以簡寫成:）。
同時，Vscode中，<myTag/>等駝峰命名法的組件或?qū)傩缘鹊?/span>和my-tag之類的組件或?qū)傩缘鹊?/span>是等價的。
例子2：創(chuàng)建一個下拉框，父組件是<select>,子組件<option>，在這兩個組件之間傳值，select傳值到option，option中傳值到select（本題意義不大,所以不必深究）
Vscode中:
Select1.vue
/**在IE里,?select的option是不支持onclick事件的,?而在FF?和?OPERA?里,?option?是支持onclick事件的?*/
index.js
HBuilder中：
在這兩個組件之間傳值，select傳值到option，option中傳值到select.html
select為子組件，option為父組件，進行父子組件的互相傳值.html
例子3：創(chuàng)建一個表單，父組件是<form>,子組件是輸入文本框，將輸入文本框中的值傳遞給<form>
創(chuàng)建一個表單，父組件是form,子組件是輸入文本框，將輸入文本框中的值傳遞給form.html
方法1
方法2：用?v-model="childValue"或?v-model:value="childValue"
例子4：靜態(tài)綁定（個人理解為:子組件中的屬性值=值之類的，值寫成固定值了，于是稱之為靜態(tài)綁定。動態(tài)綁定就是子組件中的屬性值=變量名之類的，該變量名的變量的值可變，在別處可以設(shè)置變量名=某個自定義的值，于是稱之為動態(tài)綁定)，使用props讓父組件調(diào)用時，相當于調(diào)用了很多被父組件傳值，賦值的子組件，其中發(fā)生了父組件傳值給子組件的過程（在父組件的template中，調(diào)用了子組件，并且聲明了子組件的某個屬性的值。template關(guān)于模板字符串中的子組件HTML代碼等等的調(diào)用，其實就是父組件被調(diào)用時會返回，會顯示的內(nèi)容）
本例子調(diào)用父組件的結(jié)果就是調(diào)用被父組件聲明值（即傳值）的4個子組件。myTag，my-tag（駝峰命名法），dataMsg和data-msg（我稱之為：以短杠為分割符的命名法）在本例中作為子組件名和子組件的屬性值，是可以互換，等價的。
例子5：在例子4的基礎(chǔ)上，實現(xiàn)父組件傳值給子組件，動態(tài)綁定（用v-bind:XXX或:XXX。v-bind:XXX可以略寫掉v-bind，簡寫成:XXX，效果相同，都有綁定的效果）
vue中引用數(shù)據(jù)中的圖片路徑示例.html
例子7：HBuilder實現(xiàn)基礎(chǔ)簡單的增刪查功能的vue商品管理程序（單頁面）
例子8：Vscode中用axios，mockjs等等實現(xiàn)基礎(chǔ)簡單的增刪查功能的vue商品管理程序（單頁面）
'@image()',在mockjs中是用來生成隨機圖片的。
npm?install --save axios mockjs
Products.vue
index.js
mock.js
學習截圖
--save-dev何-save的區(qū)別
給option中加點擊事件的方法.html
例子1：熟練完成單頁面VUE演示程序代碼。（代碼等部分見例子7）
父子組件的傳參方式：父傳子通過props屬性來傳遞參數(shù)，子傳父通過emit來傳遞參數(shù)
當綁定一個屬性的時候用v-bind，比如綁定url屬性的時候用v-bind:url，但是v-bind:url等等是可以簡寫成:url的（v-bind:可以簡寫成:）。
同時，Vscode中，<myTag/>等駝峰命名法的組件或?qū)傩缘鹊?/span>和my-tag之類的組件或?qū)傩缘鹊?/span>是等價的。
例子2：創(chuàng)建一個下拉框，父組件是<select>,子組件<option>，在這兩個組件之間傳值，select傳值到option，option中傳值到select
Vscode中:
Select1.vue
<template>
??<div?id="app">
????<parent?/>
??</div>
</template>
<script>
/**在IE里,?select的option是不支持onclick事件的,?而在FF?和?OPERA?里,?option?是支持onclick事件的?*/
var?childNode?=?{
??template:?`<option????@click="f"?:value=dataMsg>{{dataMsg}}</option>`,
??data()?{
????return?{
??????childValue:
????????"詩書畫唱提醒你！我是子組件的數(shù)據(jù)（childValue），\n"?+
????????"我通過$emit傳到父組件來了，被用在console.log(childValue)中！",
????};
??},
??props:?["dataMsg"],
??methods:?{
???f()?{
??????alert(666);
this.$emit('cd',?this.childValue);
????},
??},
};
var?parentNode?=?{
??template:?`<select??@change=?"cdChange"??><child?v-on:cd="childByValue"??v-bind:data-msg?=?"sshc"?></child>
????????????????<child?v-on:cd="childByValue"??v-bind:data-msg?=?"sl"?></child></select>`,
??components:?{
????child:?childNode,
??},
??data:?function?()?{
????return?{
??????sshc:?"詩書畫唱，",
??????sl:?"值得三連！",
????};
??},
??methods:?{
????childByValue:?function?(childValue)?{
??????//?childValue就是子組件傳過來的值：
??????console.log(childValue);
????},
????cdChange()?{
??????alert("觸發(fā)了select中的onchange事件");
??????//?console.log(childNode)
??????//????childNode.methods.cdChange()
????},
??},
};
export?default?{
??components:?{
????parent:?parentNode,
??},
};
</script>
index.js
import?Vue?from?'vue'
import?Router?from?'vue-router'
import?HelloWorld?from?'@/components/HelloWorld'
//自己加入的必須加載和要使用組件的代碼?START
import?Select1?from?'@/components/Select1'
//自己加入的必須加載和要使用組件的代碼?END
Vue.use(Router)
export?default?new?Router({
??routes:?[
??
??{//http://localhost:8080/#/Select1
????path:?'/Select1',
????name:?'Select1',//路由跳轉(zhuǎn)時使用
????component:?Select1
??}
????//自己加的代碼?END
??]
})
//解決重復點擊路由，界面跳轉(zhuǎn)等時報錯的代碼?START
const?originalPush?=?Router.prototype.push
Router.prototype.push?=?function?push?(location)?{
??return?originalPush.call(this,?location).catch(err?=>?err)
}
//解決重復點擊路由，界面跳轉(zhuǎn)等時報錯的代碼?END
HBuilder中：
在這兩個組件之間傳值，select傳值到option，option中傳值到select.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js"></script>
</head>
<body>
<div id="app">
<parent/>
</div>
<script>
var childNode = {
template: `<option? ? :value=dataMsg>{{dataMsg}}</option>`,
data() {
return {
childValue: '詩書畫唱提醒你！我是子組件的數(shù)據(jù)（childValue），\n' +
'我通過$emit傳到父組件來了，被用在console.log(childValue)中！'
}
},
props: ['dataMsg'],
methods: {
}
};
var parentNode = {
template: `<select? ?@change= "cdChange"><child v-on:cd="childByValue"? v-bind:data-msg = "sshc" ></child>
<child v-on:cd="childByValue"? v-bind:data-msg = "sl" ></child></select>`,
components: {
child: childNode
},
data: function() {
return {
sshc: "詩書畫唱，",
sl:"值得三連！"
}},
methods: {
childByValue: function(childValue) {
// childValue就是子組件傳過來的值：
console.log(childValue);
},
cdChange() {
alert('觸發(fā)了select中的onchange事件')
// this.$emit('cd', this.childValue);
}
}
};
new Vue({
el: '#app',
components: {
parent: parentNode
}
});
</script>
</body>
</html>
select為子組件，option為父組件，進行父子組件的互相傳值.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js"></script>
</head>
<body>
<div id="app">
<show/>
</div>
<script>
let child={
template:`<select @change="chg">
<option >{{mydata}}</option>?
<option >{{mydata}}</option>?
<option >{{mydata}}</option>?
</select>`,
props:['mydata'],
data:function(){
return{
msg:'我改變了'
}
},
methods:{
chg:function(){
this.$emit('myEve',this.msg);//把this.msg傳到myEve這個方法中
}
}
};
let parent={
template:`
<op mydata='詩書畫唱' @myEve="valFromChild" />
<!--聲明myEve方法就是為valFromChild(val)方法，其中val=this.msg
@myEve和v-on:myEve是等價的
-->
`,
components:{
op:child
},
methods:{
valFromChild(val){
console.log('來自子組件的數(shù)據(jù)：'+val)
}
,
data: function() {
return {
sshc: "詩書畫唱",
sl: "三連"
}
}
}
};
new Vue({
el:'#app',
components:{//注冊需要使用的組件
show:parent
}
})
</script>
</body>
</html>
例子3：創(chuàng)建一個表單，父組件是<form>,子組件是輸入文本框，將輸入文本框中的值傳遞給<form>
創(chuàng)建一個表單，父組件是form,子組件是輸入文本框，將輸入文本框中的值傳遞給form.html
方法1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js"></script>
</head>
<body>
<div id="app">
<parent/>
</div>
<script>
var childNode = {
template: `<input type = "text"? ?@input = "cdClick" >`,
data() {
return {
childValue: '詩書畫唱提醒你！我是子組件的數(shù)據(jù)（childValue），\n' +
'我通過$emit傳到父組件來了，被用在console.log(childValue)中！'
}
},
methods: {
cdClick() {
//第一個參數(shù)自定義事件名
//第二個參數(shù)this. childValue是需要傳的值
this.$emit('cd', this.childValue);
}
}
};
var parentNode = {
template: `<form><child v-on:cd="childByValue"></child></form>`,
components: {
child: childNode
},
methods: {
childByValue: function(childValue) {
// childValue就是子組件傳過來的值：
console.log(childValue);
}
}
};
new Vue({
el: '#app',
components: {
parent: parentNode
}
});
</script>
</body>
</html>
方法2：用?v-model="childValue"或?v-model:value="childValue"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js"></script>
</head>
<body>
<div id="app">
<parent/>
</div>
<script>
var childNode = {
template: `<input type = "text"? ?@input = "cdClick"? v-model="childValue">`,
data() {
return {
childValue: '給詩書畫唱三連'
}
},
methods: {
cdClick() {
//第一個參數(shù)自定義事件名
//第二個參數(shù)this. childValue是需要傳的值
this.$emit('cd', this.childValue);
}
}
};
var parentNode = {
template: `<form><child v-on:cd="childByValue"></child></form>`,
components: {
child: childNode
},
methods: {
childByValue: function(childValue) {
// childValue就是子組件傳過來的值：
console.log(childValue);
}
}
};
new Vue({
el: '#app',
components: {
parent: parentNode
}
});
</script>
</body>
</html>
例子4：靜態(tài)綁定（個人理解為:子組件中的屬性值=值之類的，值寫成固定值了，于是稱之為靜態(tài)綁定。動態(tài)綁定就是子組件中的屬性值=變量名之類的，該變量名的變量的值可變，在別處可以設(shè)置變量名=某個自定義的值，于是稱之為動態(tài)綁定)，使用props讓父組件調(diào)用時，相當于調(diào)用了很多被父組件傳值，賦值的子組件，其中發(fā)生了父組件傳值給子組件的過程（在父組件的template中，調(diào)用了子組件，并且聲明了子組件的某個屬性的值。template關(guān)于模板字符串中的子組件HTML代碼等等的調(diào)用，其實就是父組件被調(diào)用時會返回，會顯示的內(nèi)容）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--在id為app的div中調(diào)用自定義名字的父組件（在這里調(diào)用這個父組件，
相當于調(diào)用獲取自定義個數(shù)的被父組件賦值了的子組件的效果）：-->
<show/>
</div>
<script>
/*定義一個子組件(標簽)，名為child，
當前定義的這個child標簽（即為child子組件）
中有一個dataMsg(data-msg)屬性：*/
let child = {
template: `<h1>{{dataMsg}}</h1>`,
props: ['dataMsg']
};
let parent = {
template: `<div >
<myTag data-msg = "三連" />?
<myTag data-msg = "關(guān)注" />
<my-tag data-msg = "三連" />?
<my-tag data-msg = "關(guān)注" />
</div>`,
/*在parent組件中會注冊需要使用的其他組件child，并且給組件取名為myTag，
即給child這個子租價起別名 為myTag后，調(diào)用myTag。
（parent組件中的template中會調(diào)用myTag，相當于
調(diào)用child組件,而child組件中,因為props: ['dataMsg']這段代碼,
所以可以通過<myTag data-msg = "三連" /> 的方式設(shè)置
template: `<h1>{{dataMsg}}</h1>`中的值：*/
components: {
myTag: child
}
};
new Vue({
el: '#app',
components: {
show: parent
}
});
</script>
</body>
</html>
本例子調(diào)用父組件的結(jié)果就是調(diào)用被父組件聲明值（即傳值）的4個子組件。myTag，my-tag（駝峰命名法），dataMsg和data-msg（我稱之為：以短杠為分割符的命名法）在本例中作為子組件名和子組件的屬性值，是可以互換，等價的。
例子5：在例子4的基礎(chǔ)上，實現(xiàn)父組件傳值給子組件，動態(tài)綁定（用v-bind:XXX或:XXX。v-bind:XXX可以略寫掉v-bind，簡寫成:XXX，效果相同，都有綁定的效果）
<my-tag v-bind:data-msg = "sshc" />
<my-tag :data-msg = "sshc" />
data: function() {
return {
sshc: "詩書畫唱"
}
}
例子6：通過$emit實現(xiàn)子組件傳值給父組件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js"></script>
</head>
<body>
<div id="app">
<parent/>
</div>
<script>
var childNode = {
template: `<input type = "button" value = "點擊觸發(fā)" @click = "cdClick" >`,
data() {
return {
childValue:?
'詩書畫唱提醒你！我是子組件的數(shù)據(jù)（childValue），\n'
+'我通過$emit傳到父組件來了，被用在console.log(childValue)中！'
}
},
methods: {
cdClick() {
//第一個參數(shù)自定義事件名
//第二個參數(shù)this. childValue是需要傳的值
this.$emit('cd', this.childValue);
}
}
};
var parentNode = {
template: `<child v-on:cd="childByValue"></child>`,
components: {
child: childNode
},
methods: {
childByValue: function(childValue) {
// childValue就是子組件傳過來的值：
console.log(childValue);
}
}
};
new Vue({
el: '#app',
components: {
parent: parentNode
}
});
</script>
</body>
</html>
例子7：HBuilder實現(xiàn)基礎(chǔ)簡單的增刪查功能的vue商品管理程序（單頁面）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script srcc="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="pid" />
<input type="text" v-model="pname" />
<input type="button" value="新增" @click="add" />
<input type="text" placeholder="請輸入查詢內(nèi)容" v-model="searchQuery" />
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th>編號</th>
<th>名稱</th>
<th>價格</th>
<th>入庫日期</th>
<th>操作</th>
</tr>
<!--<tr v-for="item in list" :key="item.id">-->
<tr v-for="item in filteredPros" :key="item.id">
<td>{{item.id}}</td>
<td><img :src="item.img" />{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.sdate}}</td>
<td>
<a href="#" @click="del(item.id)">刪除</a>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
list: [{
"id": 1,
"name": "毛衣",
"price": 498.0,
"sdate": "2018-12-1",
img: "img/p(1).jpeg"
},
{
"id": 2,
"name": "LV",
"price": 200000.0,
"sdate": "2019-3-15",
img: "img/p(2).jpeg"
}
],
pid: '',
pname: '',
searchQuery: ''
},
methods: {
add: function() {
var pro = {
"id": this.pid,
"name": this.pname,
"img": "img/p(2).jpeg"
};
this.list.push(pro);
this.pid = 0;
this.pname = '';
},
del: function(pid) {
if(!confirm('確認刪除嗎?')) {
return;
}
var index = this.list.findIndex(function(product) {
return product.pid === pid;
});
//從下標處開始刪除1個元素
this.list.splice(index, 1);
}
},
computed: {
filteredPros: function() {
var self = this;
return self.list.filter(function(pro) {
console.log(pro);
return pro.name.indexOf(self.searchQuery) !== -1;
})
}
}
})
</script>
</body>
</html>
vue中引用數(shù)據(jù)中的圖片路徑示例.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>引用數(shù)據(jù)中的圖片路徑示例</title>
<script srcc="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list" :key="item.img">
<img :src="item.img"/>
</li>
</ul>
</div>
<script>
new Vue({
? ? el: '#app',
? ? data: {
? ? list:[
? ? ? ? {img:"img/p(1).jpeg"},
? ? ? ? {img:"img/p(1).jpeg"}
? ? ]
? ? }
})
</script>
</body>
</html>
例子8：Vscode中用axios，mockjs等等實現(xiàn)基礎(chǔ)簡單的增刪查功能的vue商品管理程序（單頁面）
'@image()',在mockjs中是用來生成隨機圖片的。
npm install --save axios mockjs
Products.vue
<template>
????<div>
????????<input?type="text"?placeholder="請輸入商品名稱"?v-model="pname"?/>
????????<input?type="text"?placeholder="請輸入商品價格"?v-model="price"?/>
????????<input?type="button"?value="新增"?@click="add"?/>
????????<br>
????????<input?type="text"?placeholder="請輸入查詢內(nèi)容"?
????????????v-model="skey"?/>
????????<table?class="tb">
????????????<thead>
????????????????<th>編號</th>
????????????????<th>名稱</th>
????????????????<th>價格</th>
????????????????<th>入庫日期</th>
????????????????<th>圖片</th>
????????????????<th>操作</th>
????????????</thead>
????????????<tbody>
????????????????
????????????????<tr?v-for="pro?in?flist"?:key="pro.id">
????????????????????<td>{{pro.id}}</td>
????????????????????<td>{{pro.name}}牌商品</td>
????????????????????<td>{{pro.price}}</td>
????????????????????<td>{{pro.sdate}}</td>
????????????????????<td><img?:src="pro.img"/></td>
????????????????????<td><a?href="#"?@click="deletePro(pro.id);">刪除</a></td>
????????????????</tr>
????????????</tbody>
????????</table>
????</div>
</template>
<style?scoped>
img{
width:50px?;
height:?50px;
}
</style>
<script>
import?axios?from?'axios';
//導入mock數(shù)據(jù)模塊
import?'../mock';
export?default?{
????created(){//組件創(chuàng)建成功以后獲取Mock中的數(shù)據(jù)
????????axios.get('/demo')
????????????.then(res?=>?{
????????????????this.list?=?res.data.pros;
????????????});
????},
????data(){
????????return?{
????????????list:?[],//存放商品信息的數(shù)組
????????????pid:?11,//用來存放商品的id
????????????pname:?'',//用來存放商品名稱
????????????price:?'',//用來存放商品的價格
????????????skey:?''//搜索的關(guān)鍵字
????????};
????},
????methods:?{
????????add(){
????????????let?p?=?{
????????????????id:?this.pid?+?1,
????????????????name:?this.pname,
????????????????price:?this.price
????????????};
????????????this.list.push(p);
????????????//清空輸入框中的內(nèi)容
????????????this.pname?=?'';
????????????this.price?=?'';
????????},
????????deletePro(id){
????????????if(!confirm('確認刪除嗎?')){
????????????????return;
????????????}
????????????//找到跟選擇的商品id相同的商品的下標
????????????let?index?=?this.list.findIndex(function(pro){
????????????????return?pro.id?===?id;
????????????});
????????????//從下標處開始刪除1個元素
????????????this.list.splice(index,1);
????????}
????},
????computed:?{
????????flist:?function(){
????????????//?var?self?=?this;
????????????//?return?self.list.filter(function(pro){
????????????//?????return?pro.name.indexOf(self.skey)?!==?-1;
????????????//?});
????????????return?this.list.filter(pro?=>?
????????????????pro.name.indexOf(this.skey)?!==?-1);
????????}
????}
}
</script>
<style?scoped>
.tb?{
????border:?3px?solid?blue;
????padding:?0;
????margin:?0?auto;
}
</style>
index.js
import?Vue?from?'vue'
import?Router?from?'vue-router'
import?HelloWorld?from?'@/components/HelloWorld'
//自己加入的必須加載和要使用組件的代碼?START
import?Products?from?'@/components/Products'
//自己加入的必須加載和要使用組件的代碼?END
Vue.use(Router)
export?default?new?Router({
??routes:?[
??
??{//http://localhost:8080/#/Products
????path:?'/Products',
????name:?'Products',//路由跳轉(zhuǎn)時使用
????component:?Products
??}
????//自己加的代碼?END
??]
})
//解決重復點擊路由，界面跳轉(zhuǎn)等時報錯的代碼?START
const?originalPush?=?Router.prototype.push
Router.prototype.push?=?function?push?(location)?{
??return?originalPush.call(this,?location).catch(err?=>?err)
}
//解決重復點擊路由，界面跳轉(zhuǎn)等時報錯的代碼?END
mock.js
//src/mock.js
import?Mock?from?'mockjs';
//使用mockjs模擬數(shù)據(jù)
Mock.mock('/demo',?{
????"pros|2-3":?[{???//?隨機生成5到10個數(shù)組元素????????????
????????'id|+1':?5,????//?屬性值自動加?1，初始值為1
????????'name':?'@cname',??//?中文名稱
????????'price':?'@integer(100,99999)',//隨機生成一個100到99999之間的價格
????????'sdate':?'@datetime()',//隨機時間
????????'img':?'@image()',//隨機圖片
????}]
});
npm run dev后：
http://localhost:8080/#/Products
學習截圖
--save-dev何-save的區(qū)別
1.安裝使用--save-dev簡寫為-D 的插件是被寫入到 devDependencies 對象里面。
2.使用--save簡寫為-S 的插件是則被寫入到 dependencies 對象里面
3.devDependencies ?里面的插件只用于開發(fā)環(huán)境，不用于生產(chǎn)環(huán)境。
4.dependencies? 則是需要發(fā)布到生產(chǎn)環(huán)境的。
簡單的說-D用于開發(fā)環(huán)境，-S用于生產(chǎn)環(huán)境
?是你開發(fā)時候依賴的東西，?是你發(fā)布之后還依賴的東西。
比如，你寫 ES6 代碼，如果你想編譯成??發(fā)布那么??就是。
如果你用了 jQuery，由于發(fā)布之后還是依賴，所以是。
但是在 npm 里面除了二進制的依賴，似乎也不用區(qū)分是不是。
因為使用就是自己編譯的意思，而不使用直接拿編譯后的版本的，這些依賴項也看不到。
給option中加點擊事件的方法.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
?<head>
? <meta charset="UTF-8">
? <title>select-option onclick </title>
<script type="text/javascript" >
function simOptionClick4IE(){
var evt=window.event? ;
var selectObj=evt?evt.srcElement:null;
// IE Only
if (evt && selectObj &&? evt.offsetY && evt.button!=2
&& (evt.offsetY > selectObj.offsetHeight || evt.offsetY<0 ) ) {
// 記錄原先的選中項
var oldIdx = selectObj.selectedIndex;
setTimeout(function(){
var option=selectObj.options[selectObj.selectedIndex];
// 此時可以通過判斷 oldIdx 是否等于 selectObj.selectedIndex
// 來判斷用戶是不是點擊了同一個選項,進而做不同的處理.
showOptionValue(option)
}, 60);
}
}
function showOptionValue(opt,msg){
var now=new Date();
var dt= (1900+now.getYear())+'-'+(now.getMonth()+1)+'-'+now.getDate()+
' '+now.getHours()+':'+now.getHours()+':'+now.getSeconds()+'.'+now.getMilliseconds();
var resultZone=document.getElementById('reslut');
resultZone.style.margin="10px";
resultZone.innerHTML=dt +" 時,點擊了: " + (opt.text + ' = '+opt.value);
}
</script>
?</head>
?<body>
? <select? onclick="simOptionClick4IE()" >?
<!-- 下面的 onclick="showOptionValue( this )" 是為 ff 和 opera而準備 -->
<option value="1" onclick="showOptionValue( this )" >aaaaa</option>
<option value="2" onclick="showOptionValue( this )" >bbbbb</option>
<option value="3" onclick="showOptionValue( this )" >ccccc</option>
? </select>
<div id="reslut" ></div>
</body>
</html>
