基于字符串替换实现的下拉框链动算法

最新推荐文章于 2025-08-10 21:28:09 发布

原创最新推荐文章于 2025-08-10 21:28:09 发布 · 642 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#算法 #class #function #table #html

本文介绍了一种基于字符串替换实现的下拉框链动算法。通过选择不同的选项，可以联动更新另一个下拉框的内容。该算法适用于网页前端开发中需要实现级联选择功能的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<HTML>
<HEAD>
    <TITLE>基于字符串替换实现的下拉框链动算法</TITLE>
</HEAD>
<body>
    <table class="table-form">
        <tr>
            <td>所属类型</td>
            <td class="four-content">
                <select name="type" onchange="linkOne()">
                    <option value="01">荣誉</option>
                    <option value="02">处罚</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>信用分类</td>
            <td class="four-content">
                <select name="bigCreId">
                    <option value="80712" key="02">处罚--重违法</option>
                    <option value="80502" key="01">荣誉--经营</option>
                    <option value="80710" key="02">处罚--合同</option>
                    <option value="80513" key="01">荣誉--商标</option>
                    <option value="80506" key="01">荣誉--合同</option>
                    <option value="80624" key="02">处罚--较重违法</option>
                    <option value="80514" key="01">荣誉--银行</option>
                    <option value="80504" key="01">荣誉--管理人员</option>
                    <option value="80713" key="02">处罚--轻违法</option>
                    <option value="80503" key="01">荣誉--企业</option>
                    <option value="80718" key="02">处罚--行政处罚</option>
                    <option value="80515" key="01">荣誉--质量</option>
                </select>
            </td>

    </table>
<script type="text/javascript">
//基于字符串替换实现的下拉框链动算法
var optionsArray = new Array();
function linkSelect(source, target, key) {
    //bank options
    if (optionsArray[key] == undefined) {
        optionsArray[key] = new Array();
        for (var i = 0; i < target.options.length; i++) {
            optionsArray[key][i] = target.options[i].outerHTML;
        }
    }
    //clear options
    target.innerHTML = "";
    //select and add options
    var linkKey = "key=/"" + source.value + "/"";
    var t_options = "";
    for (var i = 0; i < optionsArray[key].length; i++) {
        t_options += (optionsArray[key][i].indexOf(linkKey) == -1) ? "" : optionsArray[key][i];
    }
    var t_select = target.outerHTML;
    t_select = t_select.replace("><", ">" + t_options + "<");
    target.outerHTML = t_select;
}
    //链动类别（荣誉/处罚）和信用大类
    function linkOne() {
        linkSelect(document.all('type'), document.all('bigCreId'), 1);
    }
    linkOne();
</script>
</body>
</HTML>