为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
JQuery

         有时,选择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>

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消