if select selected 如何删除 div 块？

Question

如果 select 框 select 编辑了一个 id 项如何从页面中删除 div。不躲？

 <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option id="remove" value="mercedes">Mercedes</option> if selected this  option ?
  <option value="audi">Audi</option>
</select> 

<div id="remove">how to remove this div ?</div>

我不知道如何在 selected 选项时移除 div 块？

Answer 1

您可以使用 jquery 轻松实现此目的。您只需要监听下拉列表的变化。当下拉列表发生变化并且它的值为 mercedes 时，然后用 id=remove 删除 <div>。在 <select> 下拉列表中添加 id 的原因是为了防止以后在 HTML 页面中使用许多 <select> 元素时，监听器与其他 <select> 元素发生冲突。否则，只需使用

$('select').change(function(){

而不是

$('#cars').change(function(){

$(document).ready(function(){
   //listen for the dropdown change
   $('#cars').change(function(){
      if($(this).val() === 'mercedes'){
        //remove the element from dom
        $('#remove').remove();
      }
   });
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='cars'>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option> if selected this  option ?
  <option value="audi">Audi</option>
</select> 

<div id="remove">how to remove this div ?</div>

Answer 2

注意：- ID 必须是唯一的。因此，而不是 id 使用 value 本身来删除 div

$(document).ready(function(){
  $('select').on('change',function(){
    if($(this).val() == 'mercedes'){
      $(this).next('div#remove').remove();
    }else{
      $(this).next('div#remove').remove();
      $(this).after('<div id="remove">how to remove this div ?</div>');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select> 

<div id="remove">how to remove this div ?</div>

if select selected 如何删除 div 块？

if select selected how to remove div block?

html

javascript

css

jquery

option