jquery - 如何隐藏自定义选择列表中的选定选项？

Question

我有一个非常好的自定义选择列表代码，它几乎完美，除了已经选择的显示选项。谁能帮我简单地隐藏它？就像选择了“汽车”并且您再次单击选择字段一样，它不应在列表中显示“汽车”，而应显示所有其他字段。我需要更多文字，所以我提前感谢任何人的时间。

这是代码：

$(document).ready(function() {
  enableSelectBoxes();
});

function enableSelectBoxes() {
  $('div.selectBox').each(function() {
    $(this).children('span.selected').html($(this).children('ul.selectOptions').children('li.selectOption:first').html());
    $('input.price_values').attr('value', $(this).children('ul.selectOptions').children('li.selectOption:first').attr('data-value'));

    $(this).children('span.selected,span.selectArrow').click(function() {
      if ($(this).parent().children('ul.selectOptions').css('display') == 'none') {
        $(this).parent().children('ul.selectOptions').css('display', 'block');
      } else {
        $(this).parent().children('ul.selectOptions').css('display', 'none');
      }
    });

    $(this).find('li.selectOption').click(function() {
      $(this).parent().css('display', 'none');
      $('input.price_values').attr('value', $(this).attr('data-value'));
      $(this).parent().siblings('span.selected').html($(this).html());
    });
  });
} //-->

#dd01 {
  padding: 14px 5px 14px 0px;
  width: 100%;
  float: left;
}

div.selectBox {
  float: left;
  position: relative;
  display: inline-block;
  cursor: default;
  text-align: left;
  line-height: 40px;
  clear: both;
  color: rgb(114, 97, 97);
  cursor: pointer;
  -webkit-box-shadow: 0px 1px 10px -4px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 1px 10px -4px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
}

span.selected {
  width: 100px;
  text-indent: 15px;
  border-right: none;
  background: #f6f6f6;
  overflow: hidden;
  font-family: roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  background: #ffffff;
  height: 40px !important;
  color: #4096ee;
}

span.selectArrow {
  width: 35px;
  height: 40px !important;
  text-align: center;
  font-size: 0px;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  background: #fff;
  color: #fff;
}

span.selectArrow,
span.selected {
  position: relative;
  float: left;
  height: 30px;
  z-index: 1;
}

ul.selectOptions {
  position: absolute;
  top: 0px;
  left: 0;
  width: 135px;
  overflow: hidden;
  background: #fff;
  display: none;
  margin: 0;
  list-style: none inside none;
  padding-left: 0;
  z-index: 55;
  -webkit-box-shadow: 0px 1px 10px -4px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 1px 10px -4px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
  color: #666 !important;
}

li.selectOption {
  display: block;
  line-height: 20px;
  padding: 12px 0px 12px 15px;
  font-size: 16px;
  font-weight: 400;
  font-family: roboto, sans-serif;
  list-style: none;
  margin: 0;
}

li.selectOption:hover {
  color: #f6f6f6;
  background: #4096ee;
}

.selectArrow img {
  width: 10px;
  margin-top: 17px;
  margin-right: 8px;
}

.lc02 {
  border-bottom: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dd01">
  <div class="filters">
    <div class="ui-group">
      <div class="selectBox button-group js-radio-button-group" data-filter-group="cat">
        <input type="hidden" value="3" class="price_values" />
        <span class='selected'></span>
        <span class='selectArrow'></span>
        <ul class="selectOptions">
          <li class="selectOption button lc03" data-filter=".apple">Apple</li>
          <li class="selectOption button" data-filter=".car">Car</li>
          <li class="selectOption button" data-filter=".fork">Fork</li>
          <li class="selectOption button" data-filter=".pink">Pink</li>
          <li class="selectOption button lc02" data-filter=".red">Red</li>
        </ul>
      </div>
    </div>
  </div>
</div>

标签： jqueryselect

Answer 1

当您选择任何选项时，显示所有选项并隐藏您选择的选项。

由于li.selectOptionis display: block，您可以简单地使用.show()来显示它们。

$(this).find('li.selectOption').click(function() {
    // show all the options
    $(this).siblings().show()
    // hide the one you selected
    $(this).hide()
    $(this).parent().css('display', 'none');
    $('input.price_values').attr('value', $(this).attr('data-value'));
    $(this).parent().siblings('span.selected').html($(this).html());
});

$(document).ready(function() {
  enableSelectBoxes();
  // after the select boxes are initialized, click the first option
  $('ul.selectOptions li.selectOption:first').click();
});

function enableSelectBoxes() {
  $('div.selectBox').each(function() {
    $(this).children('span.selected').html($(this).children('ul.selectOptions').children('li.selectOption:first').html());
    $('input.price_values').attr('value', $(this).children('ul.selectOptions').children('li.selectOption:first').attr('data-value'));

    $(this).children('span.selected,span.selectArrow').click(function() {
      if ($(this).parent().children('ul.selectOptions').css('display') == 'none') {
        $(this).parent().children('ul.selectOptions').css('display', 'block');
      } else {
        $(this).parent().children('ul.selectOptions').css('display', 'none');
      }
    });

    $(this).find('li.selectOption').click(function() {
      // show all the options
      $(this).siblings().show()
      // hide the one you selected
      $(this).hide()
      $(this).parent().css('display', 'none');
      $('input.price_values').attr('value', $(this).attr('data-value'));
      $(this).parent().siblings('span.selected').html($(this).html());
    });
  });
} //-->

#dd01 {
  padding: 14px 5px 14px 0px;
  width: 100%;
  float: left;
}

div.selectBox {
  float: left;
  position: relative;
  display: inline-block;
  cursor: default;
  text-align: left;
  line-height: 40px;
  clear: both;
  color: rgb(114, 97, 97);
  cursor: pointer;
  -webkit-box-shadow: 0px 1px 10px -4px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 1px 10px -4px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
}

span.selected {
  width: 100px;
  text-indent: 15px;
  border-right: none;
  background: #f6f6f6;
  overflow: hidden;
  font-family: roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  background: #ffffff;
  height: 40px !important;
  color: #4096ee;
}

span.selectArrow {
  width: 35px;
  height: 40px !important;
  text-align: center;
  font-size: 0px;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  background: #fff;
  color: #fff;
}

span.selectArrow,
span.selected {
  position: relative;
  float: left;
  height: 30px;
  z-index: 1;
}

ul.selectOptions {
  position: absolute;
  top: 0px;
  left: 0;
  width: 135px;
  overflow: hidden;
  background: #fff;
  display: none;
  margin: 0;
  list-style: none inside none;
  padding-left: 0;
  z-index: 55;
  -webkit-box-shadow: 0px 1px 10px -4px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 1px 10px -4px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
  color: #666 !important;
}

li.selectOption {
  display: block;
  line-height: 20px;
  padding: 12px 0px 12px 15px;
  font-size: 16px;
  font-weight: 400;
  font-family: roboto, sans-serif;
  list-style: none;
  margin: 0;
}

li.selectOption:hover {
  color: #f6f6f6;
  background: #4096ee;
}

.selectArrow img {
  width: 10px;
  margin-top: 17px;
  margin-right: 8px;
}

.lc02 {
  border-bottom: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dd01">
  <div class="filters">
    <div class="ui-group">
      <div class="selectBox button-group js-radio-button-group" data-filter-group="cat">
        <input type="hidden" value="3" class="price_values" />
        <span class='selected'></span>
        <span class='selectArrow'></span>
        <ul class="selectOptions">
          <li class="selectOption button lc03" data-filter=".apple">Apple</li>
          <li class="selectOption button" data-filter=".car">Car</li>
          <li class="selectOption button" data-filter=".fork">Fork</li>
          <li class="selectOption button" data-filter=".pink">Pink</li>
          <li class="selectOption button lc02" data-filter=".red">Red</li>
        </ul>
      </div>
    </div>
  </div>
</div>