Question

我对selectbox div show hide有疑问... 首先，这是我的来源

HTML ：

<Select id="colorselector">
   <option value="red">Red</option>
   <option value="yellow">Yellow</option>
   <option value="blue">Blue</option>
</Select>
<a href="#"><span>Go</span></a>
<div id="red" class="colors" style="display:none"> red... </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>

JS ：

$(function() {
    $('#colorselector').change(function(){
        $('.colors').hide();
        $('#' + $(this).val()).show();
    });
});

演示：http://jsfiddle.net/FvMYz/1345/

当我选择红色时，红色Div显示......但我想改为......添加Go按钮。但很难做到......任何人都可以帮助我吗？

Answer 1

这是你的想法吗？

 $(function() {
        $('a').click(function(){
            $('.colors').hide();
            $('#' + $('#colorselector').val()).show();
        });
    });

JSFIDDLE

Answer 2

我的回答几乎与上面的相同但是我会在触发事件的href和.on（）方法上放置一个类或id，因为.click现在已被弃用。 .click（）只是运行一个函数到.on（）所以基本上你调用.on（）到.click（），你可以直接调用.on（）。关于.on（）的好处是你可以通过这样的方式轻松地将multipe事件监听器类型绑定到一个单选择器：

$(something).on('click, mouseover', function() { // whatever });

$(function() {

     $('a[href="#"]').on('click', function() {
          $('.colors').hide();
          $('#'+ $('#colorselector').val()).show();
     });
});

选择框显示隐藏

2 个答案: