我已經花了一段時間來隱藏一個按鈕，并在選擇一個選項時使其可見。我把所有的代碼都放在圖片里了。我做不到的代碼在底部。這是我的基本網站的照片。我想在前兩個選擇上沒有寫任何內容時隱藏圖片底部的按鈕。當左邊的按鈕是“體育”而右邊的按鈕是“網球”時，我想讓按鈕再次可見。謝謝...
1 回答
函數式編程
TA貢獻1807條經驗 獲得超9個贊
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>
- 1 回答
- 0 關注
- 125 瀏覽
添加回答
舉報
0/150
提交
取消