首页 新闻 搜索 专区 学院

如果for循环下面这段js代码?

0
悬赏园豆:5 [已解决问题] 解决于 2018-08-15 15:56

格式为:var options = [

{
   text : '第一个值',
   onselect : function() {
       alert("选中第一个值");
   }
}, 

{
   text : '第二个值',
   onselect : function() {
    alert("选中第二个值");
 }
];

以上是通过数据动态生成下拉框内容,但是中间牵扯的有onselect属性,如何通过拼接或者其他办法有效解决?

only-time的主页 only-time | 初学一级 | 园豆:4
提问于:2018-08-12 22:09
< >
分享
最佳答案
0

吃完中午饭无聊答一发

 

先来做一个测试用的页面

<html>
<body>
    <input type="button" value="配置1" id="opt1" />
    <input type="button" value="配置2" id="opt2" />
    <select id="Select"></select>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function() {
            //一会在这里添加脚本
        })
    </script>
</body>
</html>

 

根据需求,我们需要动态解析对象来生成下拉内容

那添加脚本

         var options1 = [{
                text: '第一个值',
                onselect: function() {
                    alert("选中第一个值");
                }
            }, {
                text: '第二个值',
                onselect: function() {
                    alert("选中第二个值");
                }
            }];

            var options2 = [{
                text: '测试1',
                onselect: function() {
                    console.log("s");
                }
            }, {
                text: '测试2',
                onselect: function() {
                    alert("b");
                }
            }, {
                text: '测试3',
                onselect: function() {
                    console.warn("c");
                }
            }];



            $("#opt1").on("click", function() {
                InitSelect(options1)
            })
            $("#opt2").on("click", function() {
                InitSelect(options2)
            })

             var InitSelect = function(option) {
                ///这里将是你的主要的js代码
            }

好了,至此准备结束。

真正处理的时候,option应该是由其他事件或逻辑传入,例如ajax,这里就用两个button来做模拟。然后 InitSelect 这个方法将是你初始化下拉的主要方法。

我们很容易发现,option的结构有共同点,首先是数组,然后元素的结构中必然有text和onselect两个属性。而且之前也说了,option实际应该是由其他逻辑传入的,那么我们需要保存option的变量

以此为依据继续修改脚本

            var current_option = null;

            var InitSelect = function(option) {
                $("#Select").children().remove();
                current_option = option;
                for (var i in current_option) {
                    $("#Select").append("<option>" + current_option[i].text + "</option>");
                }
            }

这里的的 current_option 就是我们用来保存option的变量。

然后再方法里清空select原有的元素,并遍历option生成元素,依次添加到select中。

到这位置估计题主都没有太多问题。

可是<option>元素本身不支持事件,那题主的响应事件应该如何处理?

换个思路,虽然<option>不行,可是<select>却是支持事件的,那么我们可以再select的事件中判断选择的对象,来触发事件,以此来曲线救国

            $("#Select").on("change", function() {
                var index = parseInt($("option:selected", this).index());
                if (index >= 0 && index < current_option.length) {
                    if (current_option[index].onselect != undefined && typeof(current_option[index].onselect) == 'function') {
                        current_option[index].onselect();
                    }
                }
            })

好了,测试一下,功能至此,基本实现。

 

留一个小小的瑕疵,当选择的是已经选择的项,则不会触发事件。

下午上班了,先不写了。有兴趣题主可以自己思考一下,提示,可以改使用click来绑定事件,但是需要进行一定逻辑处理。或者给select增加默认选项等等。

收获园豆:5
写代码的相声演员 | 小虾三级 |园豆:560 | 2018-08-13 13:40

前两天断网,非要感谢您的回复及思路,当时也想过先创建下拉框json数组,生成下拉框数据,根据选中的下拉框内容,绑定事件,非常感谢您的代码示例,现已完成该功能。

//toolbar 搜索组件-----创建下拉框内容
function selected() {
var data = '[{"text":"白马河1"},{"text":"白马河2"},{"text":"白马河3"}]';
var ss = eval(data);
Sandcastle.addDefaultToolbarMenu(ss, 'toolbar');

}
Sandcastle.finishedLoading();

//搜索组件功能----判断下拉框选中内容,同时对内容进行绑定定位事件
window.onload = function () {
var data = '[{"name":"白马河1","lg":"112.2805","lt":"34.97"},{"name":"白马河2","lg":" 112.2745","lt":"34.98"},{"name":"白马河3","lg":"112.265","lt":"34.99"}]';
var yearData = eval(data);
$("#test").on("change", function () {
var ss = this.options[this.options.selectedIndex].text;
for (var i = 0; i <= yearData.length; i++) {
if (ss == yearData[i]["name"]) {
seelectOjbect(yearData[i]["lg"], yearData[i]["lt"]);
}
}
})
}

only-time | 园豆:4 (初学一级) | 2018-08-15 15:56
其他回答(2)
0

...

我想问一下 你这个onselect 是真的onselect 还是onchange打错了。。

 

onselect的意思是input选中值。。

blurs | 园豆:659 (小虾三级) | 2018-08-13 10:26

如果是onchange打错了的话  就可以采用很简单的条件筛选解决这个问题

onchange= function(event){

  options.find(function(e){  this.value == e.text ? e.onselect.apply(this,arguments) : null; })

}

大概吧。。

支持(0) 反对(0) blurs | 园豆:659 (小虾三级) | 2018-08-13 10:32

@blurs: options 就相当于一个json数组,下拉框有100多个选择数据,onselect是绑定的选中事件,如果用拼接字符串通过for循环动态生成的话,类似于这样 var data = '[{"text":"白马河","onselect":"function(){' + seelectOjbect(112.2805, 34.97) + '}"},{"text":"白马河2,"onselect":"function(){' + seelectOjbect(124, 34) + '}""},{"text":"白马河3,"onselect":"function(){' + seelectOjbect(123, 34) + '}""}]';   拼接后无法生成下拉框,但是seelectOjbect()方法里的alert可以执行。

支持(0) 反对(0) only-time | 园豆:4 (初学一级) | 2018-08-14 22:47
0

<body>
<select id="sel"></select>
<script>
var options = [
{
text : '第一个值',
onselect : function() {
alert("选中第一个值");
}
},
{
text : '第二个值',
onselect : function() {
alert("选中第二个值");
}
}
];
var selObj=document.getElementById("sel");
console.log(selObj);
for(var i=0;i<options.length;i++){
var op=document.createElement("option");
op.innerHTML=options[i].text;
selObj.appendChild(op);
}

</script>
</body>

 

效果图

不晓得是不是你想要的?

潜龙传 | 园豆:202 (菜鸟二级) | 2018-08-13 17:22

虽然生成了下拉框内容,但是最主要的是选择内容时,没有通过onselect触发这个方法。我想要的是通过for循环生成下拉框内容并且每一个内容都绑定有onselect时间。感谢您的回答。

支持(0) 反对(0) only-time | 园豆:4 (初学一级) | 2018-08-14 22:50
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册