javascript 根据select下拉框选择显示不同的DIV

最新推荐文章于 2023-08-02 13:53:55 发布

人生海海~

最新推荐文章于 2023-08-02 13:53:55 发布

阅读量2.3k

点赞数 1

分类专栏： javascript 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/lihuihui01/article/details/122359505

版权

javascript 专栏收录该内容

2 篇文章

订阅专栏

最近要写一个根据select下不同的option值，选择展示不同的lable和input。
开始各种尝试都不可以，最后觉得还是将lable和input放在同一个div上尝试一下。
哈哈哈哈，果然可以了

下面是实现思路：

 function  ShowImage(page, tag)
 {
    var i = 1;
    var el;
    while (el = document.getElementById(tag + i)) {
        if (i == page)
            el.style.display = 'block';
        else
            el.style.display = 'none';
        i++;
    }
}

< table >
     < tr  valign ="top" >
         < td >
             < div  style ="display:block"  id ="image1" >
                 ......
             </ div >
             < div  style ="display:none"  id ="image2" >
                 ......
             </ div >
             < div  style ="display:none"  id ="image3" >
                 ......
             </ div >
         </ td >
         < td  width ="100%"  align ="right" >
             < select  onchange ="ShowImage(parseInt(this.value), 'image');" >
                 < option  selected ="selected"  value ="1" > Image 1 </ option >
                 < option  value ="2" > Image 2 </ option >
                 < option  value ="3" > Image 3 </ option >
             </ select >
         </ td >
     </ tr >
 </ table >

参考：https://blog.youkuaiyun.com/cngkqy/article/details/1875860