javascript - 单击时减去选项本身的值

标签 javascript jquery html ajax

我正在尝试在单击后更新选择框选项的值。它应该将所选值减去自身。

    <div class="pull-left col-xs-12 col-sm-4 col-md-4">

    <label for="rooms" style="color:black">No. of rooms: </label>
    <select required tabindex="10" id="selectBoxStandard" name="n_rooms">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
     </select>
    </div>
<div class="button-style-1" style="padding-bottom:80px" style="padding-bottom:40px"><a href="javascript:standardRoom()" ><i class="fa fa-calendar"></i><span class="mobile-visibility">BOOK
                                      </span></a></div>

标准房间功能

    function standardRoom()
  {
     $('#selectBoxStandard option').val(Number($("#selectBoxStandard").val()) - Number($("#selectBoxStandard option").val()));
  }

如果点击后所选值为3,则剩余值应更新为:

    <div class="pull-left col-xs-12 col-sm-4 col-md-4">

    <label for="rooms" style="color:black">No. of rooms: </label>
    <select required tabindex="10" id="selectBoxStandard" name="n_rooms">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
     </select>
    </div>

最佳答案

根据 option 值从 #selectBoxStandard 中删除最后一个子项:

$('button').on('click', standardRoom);

function standardRoom() {
  $('#selectBoxStandard').find("option:nth-last-child(-n+" + $('#selectBoxStandard').val() + ")").remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pull-left col-xs-12 col-sm-4 col-md-4">

  <label for="rooms" style="color:black">No. of rooms: </label>
  <select required tabindex="10" id="selectBoxStandard" name="n_rooms">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select>
  <button>Update</button>
</div>

关于javascript - 单击时减去选项本身的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54385192/

相关文章:

jquery - 简单的 HTML jQuery 滚动条/ slider

javascript - 我可以用一个 HTML5 应用程序控制两个浏览器窗口吗?

javascript - 减少滚动页面延迟

javascript - 在mousemove上平移指定范围内的div位置

javascript - 如何使用javascript或jquery检查元素的父元素本身是否是最后一个子元素

html - 使用301,302重定向时,搜索引擎是抓取源页面还是目标页面?

javascript - “Is there an JavaScript function for finding the browser Content Text using mouse hover element?”

javascript - 调用包含 promise 链的函数

javascript - 错误:找不到模块 Mocha

javascript - RegExp问题的条件表达式