隐藏按钮并使其再次可见

Question

我已经花了一段时间来隐藏一个按钮，并在选择一个选项时使其可见。我把所有的代码都放在图片里了。我做不到的代码在底部。这是我的基本网站的照片。我想在前两个选择上没有写任何内容时隐藏图片底部的按钮。当左边的按钮是“体育”而右边的按钮是“网球”时，我想让按钮再次可见。谢谢...

Answer 1

Although your requirements are not clear in your question, here is a solution on the bases of what I understood by your question, I have just made this snippet for first three options, check if this works for you, if no then tell me the exact changes, is ill try to help you out.

$(document).ready(function() {

var selectedOptionforHobi1;

    $("select#hobi").change(function() {

        selectedOptionforHobi1 = $(this).children("option:selected").val();

        if (selectedOptionforHobi1 != 'NA') {

            $("select#hobi2").html("");

            $("#hobi2").show();

            if (selectedOptionforHobi1 == "sports") {

                $("select#hobi2").html("<option value='NA' selected>Not Selected</option><option value='Tennis'>Tennis</option><option value='Basketball'>Basketball</option><option value='Football'>Football</option><option value='Other'>Other</option><option value='All'>All</option>");

            } else if (selectedOptionforHobi1 == "tech") {

                $("select#hobi2").html("<option value='NA' selected>Not Selected</option><option value='Electronic Equipment'>Electronic Equipment</option><option value='Robotics'>Robotics</option><option value='Programming'>Programming</option><option value='Photoshop'>Photoshop</option><option value='all'>all</option>");

            } else if (selectedOptionforHobi1 == "music") {

                $("select#hobi2").html("<option value='NA' selected>Not Selected</option><option value='Piano'>Piano</option><option value='Guitar'>Guitar</option><option value='Violin Family'>Violin Family</option><option value='Electronic Music'>Electronic Music</option><option value='Other'>Other</option>");

            }

        }

        return selectedOptionforHobi1;

    });

    $(document).on('change', '#hobi2', function() {

        var selectedOption = $(this).children("option:selected").val();

        if (selectedOption == 'Tennis' && selectedOptionforHobi1 == 'sports') {

            $(".first_question>div").hide();

            $(".first_question .first").show();

        }

        if (selectedOption == 'Basketball' && selectedOptionforHobi1 == 'sports') {

            $(".first_question>div").hide();

            $(".first_question .second").show();

        }

    });

});

.first_question>div {

        display: none;

    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3 style="margin-top: 30px;">What Do You Like The Most?</h3>

    <div class="row">

        <div class="col-md-3">

            <select class="form-control" name="hobi" id="hobi">

                <option value="NA" selected>Not Selected</option>

                <option value="sports">Sports</option>

                <option value="tech">Technology</option>

                <option value="music">Music</option>

                <option value="art">Art</option>

                <option value="romantic">Romantic</option>

                <option value="other">Other</option>

            </select>

        </div>

        <div class="col-md-4">

            <select class="form-control" name="hobi2" id="hobi2">

            </select>

        </div>

    </div>

    <h3 style="margin-top: 30px">What Is Your Favorite Color?</h3>

    <div class="row">

        <div class="col-md-3">

            <select name="renkler" class="form-control" id="renkler">

                <option>Not Selected</option>

                <option>Blue</option>

                <option>Pink</option>

                <option>Red</option>

                <option>Purple</option>

                <option>Yellow</option>

                <option>White</option>

                <option>Black</option>

                <option>Brown</option>

                <option>Turquoise</option>

                <option>Green</option>

                <option>Gray</option>

                <option>Bisque</option>

                <option>Orange</option>

                <option>All</option>

                <option>I'm Not Sure</option>

                <option>I don't want to say</option>

            </select>

        </div>

    </div>

    <div class="first_question">

        <div class="first">

            <button>Butotns in first div</button>

            <button>Butotns in first div</button>

            <button>Butotns in first div</button>

            <button>Butotns in first div</button>

        </div>

        <div class="second">

            <button>Butotns in second div</button>

            <button>Butotns in second div</button>

            <button>Butotns in second div</button>

        </div>

    </div>