0

我有一个 jquery 代码，起初我们只能看到一个组合框或<select>标签。例如，当我单击组合框中的第一个选项时，会出现一个按钮。当我单击该按钮时，该按钮会消失。问题是，当我再次单击组合框中的第一个选项时，该按钮将不再显示。

查询：

$(document).ready(function(){

    $('.mySelect').change(function(){
        var thisValue = $(this).val();
        $('#'+thisValue).fadeIn(1000);
    });


    $('.myButton').click(function(){
        $(this).hide();
    });

     $('.myButton').hide();

});

HTML：

<select class="mySelect">
    <option value="">Select</option>
    <option value="myButton1">One</option>
    <option value="myButton2">Two</option>
    <option value="myButton3">Three</option>
    <option value="myButton4">Four</option>
    <option value="myButton5">Five</option>
</select>
<input type="button" value="Click 1" id="myButton1" class="myButton"/>
<input type="button" value="Click 2" id="myButton2" class="myButton"/>
<input type="button" value="Click 3" id="myButton3" class="myButton"/>
<input type="button" value="Click 4" id="myButton4" class="myButton"/>
<input type="button" value="Click 5" id="myButton5" class="myButton"/>
4

3 回答 3

1

试试这个：

http://jsfiddle.net/ZJP4u/5/

$(document).ready(function(){

    $('.mySelect').change(function(){
        var thisValue = $(this).val();
        $('#'+thisValue).fadeIn(1000);
        $(".mySelect").val($(".myButton option:first").val());
    });


    $('.myButton').click(function(){
        $(this).hide();
    });

     $('.myButton').hide();

});
于 2013-10-09T12:27:18.327 回答
0

如果您再次单击“ONE”，它将不会显示，因为SELECT它没有更改。尝试单击两个，然后再次单击一个。button1 将显示。

在您的 jQuery 中，您仅在选择框中的选项值更改时才尝试淡入按钮。

这就是发生的事情：

当您在选项中选择 ONE 时，button1 会淡入。当您单击 button1 时，它会消失。现在您选择 ONE，这已经是选定的选项，因此您单击 ONE，它不会触发 CHANGE。

于 2013-10-09T12:33:04.563 回答
0

将您的 jquery 更改为：

$(document).ready(function(){

    //I added this section
    $('.mySelect').blur(function(){
        var thisValue = $(this).val();
        $('#'+thisValue).fadeIn(1000);
    });
    //End

      $('.mySelect').change(function(){
        var thisValue = $(this).val();
        $('#'+thisValue).fadeIn(1000);
    });    

    $('.myButton').click(function(){
        $(this).hide();
    });

     $('.myButton').hide();

});

仅当blur()您单击关闭选择时，处理程序才会触发，但 onchange 永远不会触发，除非您更改选择然后将其更改回来。

小提琴

于 2013-10-09T12:37:46.903 回答