我正在嘗試創建一個函式，其中 div 將根據選擇框選項選擇顯示，并且所選選項將消失，如果 div 被隱藏，則會出現選擇框選項。
例如在我的代碼中當我選擇紅色選項然后 div#red show();
當我單擊cancel('red')時，div 會按預期消失，紅色的選擇選項仍然被洗掉，我想反映同樣的情況。
我如何實作目標，幫助
<select id="colorselector">
<option value="0" selected>--</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</select>
<div id="red" class="colors" style="display:none; color:red"> red...
<span><a onclick="cancel('red')">Cancel</a></span>
</div>
<div id="yellow" class="colors" style="display:none; color:yellow"> yellow..
<span><a onclick="cancel('yellow')">Cancel</a></span>
</div>
<div id="blue" class="colors" style="display:none; color:blue"> blue..
<span><a onclick="cancel('')">Cancel</a></span>
</div>
$(function() {
$('#colorselector').change(function() {
$('.colors').hide();
$('#' $(this).val()).show();
$('option:selected').remove();
});
});
function cancel(num) {
$("div#" num).remove();
}
uj5u.com熱心網友回復：
您的問題是從頁面中.remove() 洗掉html - 添加它的唯一方法是重新添加選項（和顏色 div）。
相反，使用.hide()和.show()。
$(function() {
$('#colorselector').change(function() {
$('.colors').hide();
$("option").show();
$('#' $(this).val()).show();
$('option:selected').hide();
});
});
function cancel(num) {
$("div#" num).hide();
$('option').show();
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="colorselector">
<option value="0" selected>--</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</select>
<div id="red" class="colors" style="display:none; color:red"> red...
<span><a onclick="cancel('red')">Cancel</a></span>
</div>
<div id="yellow" class="colors" style="display:none; color:yellow"> yellow..
<span><a onclick="cancel('yellow')">Cancel</a></span>
</div>
<div id="blue" class="colors" style="display:none; color:blue"> blue..
<span><a onclick="cancel('blue')">Cancel</a></span>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/454950.html
標籤：javascript html jQuery 选择 附加