隐藏按钮并使其再次可见

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;&nbsp; &nbsp; $("select#hobi").change(function() {&nbsp; &nbsp; &nbsp; &nbsp; selectedOptionforHobi1 = $(this).children("option:selected").val();&nbsp; &nbsp; &nbsp; &nbsp; if (selectedOptionforHobi1 != 'NA') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("select#hobi2").html("");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#hobi2").show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (selectedOptionforHobi1 == "sports") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("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>");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (selectedOptionforHobi1 == "tech") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("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>");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (selectedOptionforHobi1 == "music") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("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>");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return selectedOptionforHobi1;&nbsp; &nbsp; });&nbsp; &nbsp; $(document).on('change', '#hobi2', function() {&nbsp; &nbsp; &nbsp; &nbsp; var selectedOption = $(this).children("option:selected").val();&nbsp; &nbsp; &nbsp; &nbsp; if (selectedOption == 'Tennis' && selectedOptionforHobi1 == 'sports') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".first_question>div").hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".first_question .first").show();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (selectedOption == 'Basketball' && selectedOptionforHobi1 == 'sports') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".first_question>div").hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".first_question .second").show();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});.first_question>div {&nbsp; &nbsp; &nbsp; &nbsp; display: none;&nbsp; &nbsp; }<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>&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select class="form-control" name="hobi" id="hobi">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="NA" selected>Not Selected</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="sports">Sports</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="tech">Technology</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="music">Music</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="art">Art</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="romantic">Romantic</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="other">Other</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select class="form-control" name="hobi2" id="hobi2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <h3 style="margin-top: 30px">What Is Your Favorite Color?</h3>&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select name="renkler" class="form-control" id="renkler">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Not Selected</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Blue</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Pink</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Red</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Purple</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Yellow</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>White</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Black</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Brown</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Turquoise</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Green</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Gray</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Bisque</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Orange</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>All</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>I'm Not Sure</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>I don't want to say</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="first_question">&nbsp; &nbsp; &nbsp; &nbsp; <div class="first">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button>Butotns in first div</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button>Butotns in first div</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button>Butotns in first div</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button>Butotns in first div</button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="second">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button>Butotns in second div</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button>Butotns in second div</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button>Butotns in second div</button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>