jq-同页面-多下拉选择-选值不重复

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jq-同页面-多下拉选择-选值不重复</title>
  <style>
    body{
      text-align: center;
      font-size: 1.2em;
    }
    .box{
      margin: 0 auto;
    }
    select{
      margin: 30px 10px;
      font-size: 1em;
    }
  </style>
</head>
<body>
  <div class="box">
    <select class="sl sl1">
      <option class="default" disabled selected value="">请选择</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>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <select class="sl sl2">
      <option class="default" disabled selected value="">请选择</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>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <select class="sl sl3">
      <option class="default" disabled selected value="">请选择</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>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
  </div>

<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script> $(function(){ $('body').on('change', '.sl', function(event) { event.preventDefault(); / Act on the event / var oldV = $(this).attr('old'); var curV = $(this).val(); if (oldV) { $(this).siblings('.sl').find('option[value='+oldV+']').show(); } $(this).siblings('.sl').find('option[value='+curV+']').hide() $(this).attr('old',curV) }) }) </script> </body> </html>

在线查看

2018-03-10 05:07 浏览(46) 留言(0)