javascript如何模拟选择下拉框的某一个option元素的效果

因为我们手动交互某一行为,首先是让它的某些属性发生变化,其次是让它触发某事件。想明白这一点就简单了。让属性发生变化,当然是改动其固有属性,因此 setAttribute(aaa,bbb)便出局了,因此它是用来设置自定义属性(IE678另谈,那是怪胎)。想触发事件,我们可以用fireEvent或dispathEvent,阿狸从雅虎的YUI搞了一个event-simulate,想得更加周全,大家想深入可以参考一下。

下面就是我的成果了:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script src="avalon.js"></script>
        <script>

            var model = avalon.define("test", function(vm) {
                vm.array = ["aaa", "bbb", "ccc", "ddd"]
                vm.selected = "ddd"
                vm.$watch("selected", function(a) {
                    avalon.log(model.$model.selected)
                })
            })
            function fireEvent(element, event) {
                if (document.createEventObject) {
                    var evt = document.createEventObject();
                    return element.fireEvent('on' + event, evt)
                } else {
                    var evt = document.createEvent("HTMLEvents");
                    evt.initEvent(event, true, true)
                    return !element.dispatchEvent(evt);
                }
            }
            setTimeout(function() {
                var el = document.getElementById("aaa")
                el.options[1].selected = true//改动属性
                fireEvent(el, "change")//触发事件
            }, 3000)

        </script>
    </head>
    <body>
        <div ms-controller="test">
            <select ms-duplex="selected" id="aaa">
                <option ms-repeat="array" ms-value="el">{{el}}</option>
            </select>
        </div>
    </body>
</html>

当然现在这样做是不够严谨,因为我是用人脑承担了一些计算量。我们需要知道它是否发生了改变。因此有一个比较前后值的函数,这个可以看这里。

查看本栏目更多精彩内容:http://www.bianceng.cnhttp://www.bianceng.cn/webkf/script/

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索function
, 属性
, document
, element
, selected
, 模拟下拉框
fireEvent
控制下拉框option宽度、option下拉框 css样式、下拉框option样式、css 下拉框option宽度、下拉框option设置属性,以便于您获取更多的相关知识。

时间: 2024-10-27 02:53:53

javascript如何模拟选择下拉框的某一个option元素的效果的相关文章

jquery仿QQ登录账号选择下拉框效果_jquery

QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮. 一.制作静态效果 先用css和html,做出一个应该有的样子.这里这两个我使用的是字体,可以在icomoon网站上面自己制作.用字体的好处是和输入框定位很方便,而且还可以控制大小颜色等,唯一的不足是IE6和IE7由于不支持:before选择器,导致无法显示

用jQuery模拟select下拉框的简单示例代码

 本篇文章主要是对用jQuery模拟select下拉框的简单示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮.这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

javascript省市区三级联动下拉框菜单实例演示_javascript技巧

本文实例讲述了javascript实现省市区三级联动下拉框菜单代码,像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"

关于ie9不能选择下拉框的问题

问题描述 关于ie9不能选择下拉框的问题 ie9模式窗口下dropdownList不能使用,这是怎么回事?求大神指导一下. 大致的代码 在ie9的模式窗口下不能使用,但是在其他的浏览器中可以. 菜鸟我用f12调试下,修改了下id class或者删除,然后在页面中点击,居然可以使用,这是为什么?是ie9的bug还是代码的问题?如果是代码的为题那么在ie8 7,火狐上面都可以,就是在ie9上不行?求大神指教,指教,急急急. 相关文章 能不能让listview的单元格变成下拉框的形式? java we

下拉框 时间控件-如何实现当选择下拉框的值时初始化日期控件

问题描述 如何实现当选择下拉框的值时初始化日期控件 在页面上如何实现当选择下拉框的值时初始化日期控件的值.我想要在选择下拉框里面的值的时候,日期控件那个框里面的日期会被清除置空 解决方案 用javascript写个方法,当下拉框值改变时触发,然后修改日期控件的值 解决方案二: //<![CDATA[ var cal = Calendar.setup({ onSelect: function(cal) { cal.hide() }, showTime: true }); cal.manageFie

jQuery模拟select下拉框方法总结

例1,利用div+ul实现实例 因为在IE6下,表单元素select的高度实在不好控制,即使让其和其他元素看起来一样高宽相符,那也仅仅是通过内边距进行的一种视觉误差实现的,而且呢,select控件的滚动条也难看. 正是如此,才会有很多人用div+ul来模拟select下拉框. HTML代码如下,简简单单,一个外div,嵌套一个input和一个ul列表(input用于提交选中的数据):      代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

代码-java .选择下拉框中选择的属性,点击查询按钮,在表中显示

问题描述 java .选择下拉框中选择的属性,点击查询按钮,在表中显示 例如下面的下拉框: <td class="std_1"> 抵押类型 </td> <td class="std_2"> <select style="width:150px" name="isDy" id="s1"> <tion value="0">--请选择

为什么当进入在线电影页面时先搜索一页数据显示在GridView 上面,当我选择下拉框 类型后,会显示搜索到的对应电影,但是之前显示的不会消失,而是叠加到一块了

问题描述 在下拉框监听里面 加 clear() 数据不会叠加,但是 从之页面进来的时候就是空数据,只有选择下拉框的时候才后显示查询出来的对应 信息....regionSpinner = (Spinner) findViewById(R.id.RegionSpinnerID);regionSpinner.setOnItemSelectedListener(new OnItemSelectedListener() {public void onItemSelected(AdapterView<?>

js jq-如何实现下拉框点击一个选项,该选项的内容显示在文本框中?

问题描述 如何实现下拉框点击一个选项,该选项的内容显示在文本框中? <div class="input-group"> <input class="form-control select_of_input"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-