如何用比较高端的方法通过选择不同的下拉文本框的值显示不同的文本框


如图所示，我想请教下如何用比较高端的方法通过选择不同的下拉文本框的值，展现出不同的文本框组合。文本框大概有20个左右，每次就显示10余个，请大神给点思路。

解决方案 »

  1.   

    要控制的项目每个放一个div里面，加自定义属性存储option的值集合，如sel1="2,5"，多个select控制项目增加多个不同的自定义属性select添加onchange判断选择的值，遍历这些和div对应属性值包含就显示，否则隐藏
      

  2.   


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
    $(".list .sel").change(function(event){
    $(".list li[class^=item]").hide();
    this.value.split(",").forEach(function(v){
    $(".list ."+v).show();
    });
    }).change();
    });
    </script>
    </head>
    <body><ul class="list">
    <li>
    <select class="sel">
    <option value="item1,item3,item4,item6" selected="selected">显示1,3,4,6</option>
    <option value="item2,item3,item7,item8">显示2,3,7,8</option>
    <option value="item2,item5,item10">显示2,5,10</option>
    <option value="item3,item7,item8,item9,item10">显示3,7,9,10</option>
    <option value="item6">显示6</option>
    </select>
    </li>
    <li class="item1">text1<input type="text"></li>
    <li class="item2">text2<input type="text"></li>
    <li class="item3">text3<input type="text"></li>
    <li class="item4">text4<input type="text"></li>
    <li class="item5">text5<input type="text"></li>
    <li class="item6">text6<input type="text"></li>
    <li class="item7">text7<input type="text"></li>
    <li class="item8">text8<input type="text"></li>
    <li class="item9">text9<input type="text"></li>
    <li class="item10">text10<input type="text"></li>
    </ul></body>
    </html>