Question

我有一个自动选择的选项下拉列表。

我要做的是隐藏未选中的选项。也就是说，如果我现在点击一个名为A的特定酒店预订，我带到预订页面，在下拉菜单中自动选择酒店A，我怎么能隐藏酒店B，C和D

Answer 1

您必须在page_load / doc_ready上执行此操作：

$(document).ready(function(e) {
  $('#selectID').val("C");
  $('#selectID').find(':not(:selected)').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id='selectID'>
  <option value="">select</option>
  <option value="A">one</option>
  <option value="B">two</option>
  <option value="C">three</option>
</select>

Answer 2

我不确定我是否理解你真正想要的东西，但我知道你有一些酒店，当用户选择一家酒店时，你想要隐藏其他酒店。

$(function() {

  $('#hotels').change(function() {
    var selected = $(this).val();
    console.log(selected);
    $("#select-div select").hide();
    $('#' + selected).show();


  });

});

#select-div select {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<select id="hotels">
  <option value="">--Select one hotel--</option>
  <option value="hotelA-rooms">Hotel A</option>
  <option value="hotelB-rooms">Hotel B</option>
  <option value="hotelC-rooms">Hotel C</option>
</select>

<div id="select-div">
  <select id="hotelA-rooms">
    <option>Room with 2 bed-$100</option>
    <option>Room with 2 bed-$200</option>
    <option>Room with 1 bed-$70</option>
  </select>

  <select id="hotelB-rooms">
    <option>Room with 1 bed-$170</option>
    <option>** Room with 1 bed-$370</option>
  </select>

  <select id="hotelC-rooms">
    <option>Room with 3 bed-$370</option>
    <option>Room with 5 bed-$500</option>
  </select>
</div>

试试这个，希望这有助于您更好地理解选择。

如何隐藏未选择的选项

2 个答案: