Select 随数据属性变化

Question

我有以下小提琴：http://jsfiddle.net/4Ly1973u/。

这是我的 html：

<article>
  <select>
    <option name='First' value='first'>First</option>
    <option name='Second' value='second'>Second</option>
    <option name='Third' value='third'>Third</option>
  </select>
  <div data-name='first' class='show'>
    This one should show by default.
  </div>
  <div data-name='second'>
    only visible when "second" is selected
  </div>
  <div data-name='third'>
    only visible when "second" is selected
  </div>
</article>

基本上，我希望默认显示第一个 div，但是当您将 select 更改为第二个或第三个时，我希望它更改为 div。

我知道我可以使用 if 语句轻松完成此操作，但我可能有很多 select 选项，所以我希望有一个更简洁的解决方案。或者这是唯一的方法？

Answer 1

试试这个

$(function () {
    $("select").on("change", function () {
        $('.show').removeClass('show');
        $('div[data-name="' + $(this).val() + '"]').addClass('show');
    });
});

演示：http://jsfiddle.net/4Ly1973u/1/

Answer 2

这里是工作 fiddle：http://jsfiddle.net/4Ly1973u/3/

<article>
    <select>
        <option name='First' value='first'>First</option>
        <option name='Second' value='second'>Second</option>
        <option name='Third' value='third'>Third</option>
    </select>
    <div id='first' class='show'>This one should show by default.</div>
    <div id='second' class='noshow'>only visible when "second" is selected</div>
    <div id='third' class='noshow'>only visible when "third" is selected</div>
</article>

CSS

.show {
    display: block;
}
.noshow {
    display:none;
}

jQuery

$(function () {
    $("select").change(function () {
        $('.show').removeClass('show').addClass('noshow');
        var getValue = $("select option:selected").val();        
            $("#" + getValue).removeClass('noshow').addClass('show');
    });
});

Select 随数据属性变化

Select change with data attribute

html

javascript

css

jquery