如果for循环下面这段js代码？
0
悬赏园豆：5
[已解决问题]
解决于 2018-08-15 15:56
格式为：var options = [
{
text : '第一个值',
onselect : function() {
alert("选中第一个值");
}
},
{
text : '第二个值',
onselect : function() {
alert("选中第二个值");
}];
以上是通过数据动态生成下拉框内容，但是中间牵扯的有onselect属性，如何通过拼接或者其他办法有效解决？
最佳答案
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
前两天断网，非要感谢您的回复及思路，当时也想过先创建下拉框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"]);
}
}
})
}
其他回答(2)
0
...
我想问一下 你这个onselect 是真的onselect 还是onchange打错了。。
onselect的意思是input选中值。。
如果是onchange打错了的话 就可以采用很简单的条件筛选解决这个问题
onchange= function(event){
options.find(function(e){ this.value == e.text ? e.onselect.apply(this,arguments) : null; })
}
大概吧。。
@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
<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>
效果图
不晓得是不是你想要的？
虽然生成了下拉框内容，但是最主要的是选择内容时，没有通过onselect触发这个方法。我想要的是通过for循环生成下拉框内容并且每一个内容都绑定有onselect时间。感谢您的回答。
