通过循环将下拉列表项传递到iframe

时间:2018-07-26 22:06:10

标签: javascript iframe

我想通过循环将下拉列表项传递给iframe源(src),但它的工作原理如此之好,但是循环是如此之快,以至于它直接转到下拉列表的最后一个索引,而iframe仅加载下拉列表的最后一个索引项。我已经尝试过setTimeout和setInterval,但是它不起作用。

Here is my code...
//Dropdown list
<label>Faculty (Employee Code)</label>
        <select class="form-control" name="faculties" id="faculties" onchange="update_chart(this.value,document.getElementById('myIframe'))">
            <option>--Select--</option>
        </select>

//frame
<iframe id="myIframe" src="chart_course_wise.php" frameborder="0" ></iframe>

<script>

function update_chart(str, myIframe) {
        var dept = document.getElementById('dept_code').value;
        var sem = document.getElementById('sem').value;
        var regExp = /\(([^)]+)\)/;
        var emp_code = regExp.exec(str);
        myIframe.src = "chart_course_wise.php?fac=" + emp_code[1] + "&dept=" + dept + "&sem=" + sem;
    }


    function generate(){
        var element = document.getElementById('faculties'),i;
        var length = element.options.length;

        for(i=1;i<length;i++){
           var ddl = element.options[i].value;
           update_chart(ddl,document.getElementById('myIframe'));
        }
    }

</script>

1 个答案:

答案 0 :(得分:0)

据我了解,您的generate函数是从代码段中以外的地方调用的。

如果将generate()转换为JavaScript generator function*,并将其添加到框架的onload事件中,则可能会得到所需的内容:

function update_chart(str, myIframe) {
    var dept = document.getElementById('dept_code').value;
    var sem = document.getElementById('sem').value;
    var regExp = /\(([^)]+)\)/;
    var emp_code = regExp.exec(str);
    myIframe.src = "chart_course_wise.php?fac=" + emp_code[1] + "&dept=" + dept + "&sem=" + sem;
    myIframe.document.body.onload = gen.next
}

function* generator() {
    var element = document.getElementById('faculties'),
        i;
    var length = element.options.length;

    for (i = 1; i < length; i++) {
        var ddl = element.options[i].value;
        yield update_chart(ddl, document.getElementById('myIframe'));
    }
}

var gen = generator();
gen.next(); // this is how you execute the generator

现在您可以启动生成器了,为什么要运行到第一个yield语句。 然后它将退出,直到触发myIframe onload事件为止,该事件将执行gen.next(),进而使生成器恢复执行,重复冲洗。