根据 jQuery 中的选项选择和条件追加元素

Question

我正在尝试创建一个函数，其中 div 将基于 select 框选项 selection 显示，而 selected 选项将再次消失如果 div 被隐藏，那么 select 框选项将出现。

例如在我的代码中当我 select Red 选项然后 div#red show();

当我点击 cancel('red') 时 div 按预期消失了 select 红色选项仍然被移除，我也想反映一下。

我是如何实现目标的，求助

<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();
}

Answer 1

您的问题是 .remove() 删除了 页面中的 html - 将其重新添加到 re-add 的唯一方法选项（和颜色 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>

根据 jQuery 中的选项选择和条件追加元素

append Element based on option selection and conditions in jQuery

javascript

html

jquery

select

append