继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Jquery实现select选择什么,页面展现为选择的项~!

安卓软件程序开发入门学习
关注TA
已关注
手记 289
粉丝 49
获赞 282

         有时,选择select某项时,要显示一个文本说明,不同的选项出现不同的文本说明,可用jquery实现。效果:http://www.cnblogs.com/opper/archive/2009/01/09/1372664.html
$(document).ready(function(){selectval();});
function selectval()
{
$("select").change(function(){ $(".ii").remove();
var t=$(this).children("[@selected]").html();
var a=['111','222','333'];
var b='';
$.each(a,function(){
if(t!=this){b=b+this+'<br>'}
});
$("select").after('<div class="ii">'+b+'</div>');
});
}<div>
        <select>
        <option value="aa">111</option>
        <option value="bb">222</option>
        <option value="cc">333</option>
        </select>
        </div>当然还有这种情况~!<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
        <title>无标题页</title>

        <. type="text/." src="../JS/jquery.js"></.>
                <. language =. >
         $(document).ready(function(){selectval();});
         function selectval(){
         $("#dis").change(function(){
         $('.1').hide();
         $('.2').hide();
         var s=$(this).children("[@selected]").html();
         var c=$(this).children("[@selected]").val();
         var a=['aaaaa','bbbbb','cccc'];
         var b='';
         $.each(a,function(){if(this!=s){
         $('.'+c).show();
         }});
         })
         }
                </.>
</head>
<body>
        <form id="form1" runat="server">
                <div id="content" class="test">
                        <h1>
                                test</h1>
                        <table class="bd_cmn_style">
                                <tbody>
                                        <tr class="1" style="display: none">
                                                <td>
                                                        aaaaaaa</td>
                                                <td>
                                                        bbbbbbb</td>
                                        </tr>
                                        <tr class="2" style="display: none">
                                                <td>
                                                        ccccccc</td>
                                        </tr>
                                        <tr>
                                                <td>
                                                        显示隐藏
                                                        <select id="dis">
                                                                <option value="1">aaaaa</option>
                                                                <option value="2">bbbbb</option>
                                                                <option value="3">cccc</option>
                                                        </select>
                                                </td>
                                        </tr>
                                </tbody>
                        </table>
                </div>
        </form>
</body>
</html>

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP