时间戳

首页 > 解决方案 > 选择的选择 - 过滤器使用 jQuery

javascript - 选择的选择 - 过滤器使用 jQuery

问题描述

我在 asp.net 中使用选择的下拉菜单。有没有办法过滤 optgroup ？

有一个单选按钮列表控件，其值为 US 和 UK。我想根据用户的单选按钮选择过滤下拉列表。如果选择了“美国”，则下拉菜单应仅显示美国 optgroup 记录。

这是jsfiddle；

http://jsfiddle.net/7ngftsq2/

这是我到目前为止没有运气的尝试；

('#rbDistDiv input').change(function () {
            // The one that fires the event is always the
            // checked one; you don't need to test for this
            var ddlDist = $('#VCSdistSelect_ddlDist'), 
            val = $(this).val(),
            region = $('option:selected', this).text();

            $('span > optgroup', ddlDist).unwrap();
            if (val !== '%') {
                $('optgroup:not([label="' + region + '"])', ddlDist).wrap('<span/>');
            }


        });

标签： javascriptjqueryasp.netjquery-chosen

解决方案

您应该能够执行类似的操作：

$(".chosen").chosen({
  width: '600px',
  allow_single_deselect: true,
  search_contains: true
});
 
let UK_optgroup = $("#optgroup-uk").clone();
let US_optgroup = $("#optgroup-us").clone();
let CA_optgroup = $("#optgroup-ca").clone();

function filterSelect(selectedRadio) {
  switch(selectedRadio) {
    case "US": return US_optgroup
    case "UK": return UK_optgroup
    case "CA": return CA_optgroup
  }
}
 
$('[type="radio"]').on('change', function() {
  // This is only here to clear the selected item that is shown on screen
  // after a selection is made. You can remove this if you like.
  $("#selected-item").html("");
  // Everything from here down is needed.
  $("#select")
    .children()
    .remove('optgroup');
  $("#select")
    .append(filterSelect(this.value))
    .trigger("chosen:updated");
});

$("#select").on('change', function(event) {
  $("#selected-item").html("Selected Item: <b>" + event.target.value + "</b>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet"/>

<table id="rbDistDiv" border="0">
  <tbody>
    <tr>
      <td><input id="rbDistDiv_0" type="radio" name="rbDistDiv" value="US"><label for="rbDistDiv_0">US</label></td>
    </tr>
    <tr>
      <td><input id="rbDistDiv_1" type="radio" name="rbDistDiv" value="UK"><label for="rbDistDiv_1">UK</label></td>
    </tr>
    <tr>
      <td><input id="rbDistDiv_2" type="radio" name="rbDistDiv" value="CA"><label for="rbDistDiv_2">CA</label></td>
    </tr>    
  </tbody>
</table>
<p id="selected-item"></p>
<select id="select" class="chosen">
  <option value="" disabled selected>Select your option</option>
  <optgroup id="optgroup-uk" label="UK">
    <option value="Adrian">Adrian</option>
    <option value="Alan">Alan</option>
    <option value="Alan B">Alan B</option>
  </optgroup>
  <optgroup id="optgroup-us" label="US">
    <option value="John">John</option>
    <option value="Billy">Billy</option>
    <option value="Chris">Chris</option>
  </optgroup>  
  <optgroup id="optgroup-ca" label="CA">
    <option value="Gabrielle">Gabrielle</option>
    <option value="Maude">Maude</option>
    <option value="Morgan">Morgan</option>
  </optgroup>    
</select>

推荐阅读