举个例子，2 comboxbox如何选择工作并显示相应的iframe？

Question

我试着在网页上做两个组合框

让国家选项者选择“中国”，第二个组合框将列出所有省份，然后如果用户选择"JiangSu“，例如将在第二个组合框下打开一个专用的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属性。

Answer 1

下面是一个基本的例子。

​

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>

​