任何例子如何2组合框选择工作和显示相应的iframe

Any example how 2 comboxbox select work and display corresponding iframe?

本文关键字：显示 iframe 工作选择组合任何例更新时间：2023-09-26

我尝试在网页上做2个组合框

让国家选项人选择"中国"，第二个组合框将列出所有省份，之后，如果用户选择"江苏"，例如将打开一个专用的iframe在下面的第二个组合框

你知道怎么做吗?

<script type="text/javascript">
    /*
    Triple Combo Script Credit
    By Philip M: http://www.codingforums.com/member.php?u=186
    Visit http://javascriptkit.com for this and over 400+ other scripts
    */
    var categories = [];
    categories["startList"] = ["China","US"]
    categories["China"] = ["ANHUI","JIANGSU"];
    categories["US"] = ["Alabama","New york"];
    var nLists = 2; // number of select lists in the set
    function fillSelect(currCat,currList){
        var step = Number(currList.name.replace(/'D/g,""));
        for (i=step; i<nLists+1; i++) {
            document.forms['tripleplay']['List'+i].length = 1;
            document.forms['tripleplay']['List'+i].selectedIndex = 0;
        }
        var nCat = categories[currCat];
        for (each in nCat) {
            var nOption = document.createElement('option'); 
            var nData = document.createTextNode(nCat[each]); 
            nOption.setAttribute('value',nCat[each]); 
            nOption.appendChild(nData); 
            currList.appendChild(nOption); 
        }
    }
    function getValue(L2, L1) {
        <!-- alert("Your selection was:- 'n" + L1 + "'n" + L2);-->
        document.getElementById("lname").value= L1 + "'n" + L2;
    }

    function init() {
        fillSelect('startList',document.forms['tripleplay']['List1'])
    }
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);           
</script>

html

<span class="favorBOfont">Country Selection</span><p>&nbsp;</p>
<form name="tripleplay" action="">
    Category: 
    <select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
        <option selected>Make a selection</option>
    </select>
    &nbsp;
    <p>&nbsp;</p>
    <p>
        Content:
    <select name='List2' onchange="getValue(this.value, this.form['List1'].value)">
        <option selected>Make a selection</option>
    </select>
        <!-- onchange="fillSelect(this.value,this.form['List3'])" -->

    </p>
</form>
&nbsp;<p>&nbsp;</p>
<p>
    <textarea rows="8" cols="88" id="lname" name="lname" size="30" height="30" readonly></textarea>
</p>
<div></div>

我需要一个iframe语句而不是textarea属性

这是一个基本的例子。

var nList1 = document.querySelector('select[name="List1"]'),
    nList2 = document.querySelector('select[name="List2"]'),
    myFrame = document.getElementById('myFrame'),
    categories = ["China", "US"],
    contents = {
        China: ["ANHUI", "JIANGSU"],
        US: ["Alabama", "New york"]
    }
categories.forEach(function (category) {
    var option = document.createElement('option');
    
    option.value = option.textContent = category;
    nList1.appendChild(option);
});
nList1.addEventListener('change', function (evt) {
    var target = evt.target,
        value = target.value,
        options = nList2.options,
        content = contents[value];
    myFrame.src = '';
    nList2.selectedIndex = 0;
    while (options.length > 1) {
        nList2.removeChild(options[1]);
    }
    if (content) {
        content.forEach(function (element) {
            var option = document.createElement('option');
            
            option.value = option.textContent = element;
            nList2.appendChild(option);
        });
    }
}, false);
nList2.addEventListener('change', function (evt) {
    if (evt.target.selectedIndex) {
        myFrame.src = '/';
    } else {
        myFrame.src = '';
    }
}, false);

.dropDown {
    display:block;
}
#myFrame {
    margin-top:1em;
    width:100%
}

<span class="favorBOfont">Country Selection</span>
<label class="dropDown">Category:
    <select name="List1">
        <option>Make a selection</option>
    </select>
</label>
<label>Content:
    <select name="List2">
        <option>Make a selection</option>
    </select>
</label>
<iframe id="myFrame"></iframe>