javascript - 选择特定选项时如何重置选择

Question

我想创建一个虚拟选项，仅用于触发模式，我不希望选择该选项

这是 HTML:

  <select  onchange="setCookie('addcategory', this.value, 365);">
    <option hidden disabled selected value> -- select a category -- </option>
      <?php foreach( $categories as $index => $category ) :?>
    <option value="<?php echo $category ?>" ><?php echo $category ?></option>
      <?php endforeach ?>
    <option value="I_C_M">+++++++Click to Add new+++++++</option>
  </select>

这是我尝试过的:

$('select').on('change', function() {
  if(this.value === "I_C_M"){
    $(this.parentNode).prop('selectedIndex',-1);
    $('#insert_category_modal').modal('show');
  }
});

“点击添加新的”是虚拟选项

Answer 1

我认为您应该使用 this 对象将当前元素上的 selectedIndex 设置为 0。

演示:

$('select').on('change', function() {
  if(this.value === "I_C_M"){
    $(this).prop('selectedIndex', 0);
    //$('#insert_category_modal').modal('show');
  }
});

function setCookie(c, v, d){}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select  onchange="setCookie('addcategory', this.value, 365);">
  <option hidden disabled selected value> -- select a category -- </option>

  <option value="test" >Test</option>

  <option value="I_C_M">+++++++Click to Add new+++++++</option>
</select>