选择选择 - 使用 jquery 过滤 <optgroup>

Question

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

有一个单选按钮列表控件，其值为 US 和 UK。我想根据用户的单选按钮选择过滤下拉列表。如果选择了“US”，则下拉菜单应仅显示 US 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/>');
            }


        });

Answer 1

你应该可以做类似这样的事情：

$(".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>

Answer 2

当对单选按钮进行更改时，只需通过标签隐藏/显示它们。

$('[type="radio"]').on('change', function () {
  $('select')
    .val('')  // reset value if selection already made
    .find('optgroup')  // find the groups
      .hide()  // hide them all 
    .filter('[label="' + this.value + '"]')  // find the one that matches radio
      .show() // show it

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
    </tbody></table>
    
    
    <br>

<select name="VCSdistSelect$ddlDist" id="VCSdistSelect_ddlDist" class="chosen-select" data-placeholder="Select a Distributor" >
	<option selected="selected" value=""></option>
		<optgroup label="US">
			<option value="123" division="US">Aaron</option>
		</optgroup>
	<optgroup label="UK">
		<option value="655" division="UK">John</option>
	</optgroup>
</select>