点击select中的option 变换 下面的div内容

发现select下面option很难被选中，$(this).index();也不行。最后采用了一种笨的方法，给每个option才value值。

通过$(this).val() 获取value的数字。然后匹配div中的索引，达到点击显示对应的内容。

 

<style>
        .test1 {
            width: 300px;
            background-color: pink;
            height: 300px;

        }

        .test1 div {
            width: 100%;
            height: 50px;
            display: none
        }

        .test1 .curren {
            width: 100%;
            height: 50px;
            display: inline-block !important
        }
    </style>

 

 <select name="test" id="test">
        <option value="0" class="show">0000000</option>
        <option value="1">11111</option>
        <option value="2">222222</option>
        <option value="3">333333</option>
        <option value="4">444444</option>
    </select>

    <div class="test1">
        <div class="show1">00000</div>
        <div>111111</div>
        <div>222222</div>
        <div>333333</div>
        <div>444444</div>
    </div>

 

$(function () {
            $("#test").change(function () {
                var i = $(this).val();
                //var index = $(this).index();
                console.log(index);
                $(this).addClass("show").siblings().removeClass("show");
                var ii = $(".test1 div").index();
                $(".test1 div").eq(i).addClass("curren").siblings().removeClass("curren");


            });


        })