Question

我创建了一个简单的应用，其中包含<select>个列表，这些列表根据先前的选择列出了hide()或show()个选项值。

有两个列表，一个带有车辆制造，另一个带有车辆模型。选择某个品牌（即BMW）后，下一个品牌<select>会出现，仅显示BMW车型。反之亦然，奥迪等等。

在 Models 列表中，我为每个<option>值附加了一个ID，并根据以前的选择显示或隐藏了这些<option>值。例如，如果选择了BMW，它将隐藏两个奥迪车型<option>'s，即Q1和Q3。如果选择了奥迪，它将隐藏两个宝马模型<option>'s X1和X2。

我成功实现了这一基本功能；但是，当我集成jQuery的Chosen时，它不再起作用。我非常喜欢Chosen，一旦我构建了这个应用程序，它将非常有用，因此我希望通过集成实现相同的功能。

这是简单的代码文件：

<!DOCTYPE html>
<html>
<head>
	<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
	<style type="text/css">
		.chosen-select {width:200px}
		.hidden {display: none;}
	</style>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$(".chosen-select").chosen({
				disable_search_threshold: 4
			});
		});
	</script>
	<script type="text/javascript">
		$(document).ready(function() {
			var $models = $('#s2');
			var $drivetrain = $('#s3');
			var $bmwmodels = $('#X1, #X2');
			var $audimodels = $('#Q1, #Q3');
			$('#s1').change(function() {
				var selectedValue = $(this).val();
				if(selectedValue  == 'BMW') {
					$audimodels.hide();
					$drivetrain.parent().hide();
					$models.parent().show();
					$bmwmodels.show();
				} 
				else if (selectedValue == 'AUDI') {
					$bmwmodels.hide();
					$drivetrain.parent().hide();
					$models.parent().show();
					$audimodels.show();
				}
				else {
					$bmwmodels.hide();
					$audimodels.hide();
					$models.parent().hide();
					$drivetrain.parent().hide();
				}
			});
			//Hide onload
			function hide() {
				$models.parent().hide();
				$drivetrain.parent().hide();
				$bmwmodels.hide();
				$audimodels.hide();
			}
			// call hide AFTER .chosen() has been invoked on the visible elements
			hide();
		});
	</script>
</head>
<body onload="hide()">
<table>
	<tr>
		<td>
			<select data-placeholder="Select Brand" class="chosen-select" id="s1">
				<option disabled selected></option>
				<option value="BMW">BMW</option>
				<option value="AUDI">AUDI</option>
				<option value="nothing" id="nothing">Nothing</option>
			</select>
		</td>
	</tr>
	<tr>
		<td>
			<select data-placeholder="Select Model" class="chosen-select" id="s2">
				<option disabled selected></option>
				<option value="nothing" id="nothing">Nothing</option>
				<option value="X1" id="X1">X1</option>
				<option value="X2" id="X2">X2</option>
				<option value="Q1" id="Q1">Q1</option>
				<option value="Q3" id="Q3">Q3</option>
			</select>
		</td>
	</tr>
</table>
</body>
</html>

任何帮助将不胜感激！非常感谢。

Answer 1

$(".chosen-select").trigger('chosen:updated');您需要通知Chosen您的选项已更新。此代码更新了选择的代码，以处理更新的选项。

要注意的一件事是删除预选功能无效，您需要在选择的解决方案中找到有关如何删除预选功能的方法。

$(document).ready(function() {

  var $models = $('#s2');
  var $drivetrain = $('#s3');

  var $bmwmodels = $('#X1, #X2');
  var $audimodels = $('#Q1, #Q3');

  console.log( $bmwmodels, $audimodels);
  $('#s1').change(function() {
    var selectedValue = $(this).val();

    if (selectedValue == 'BMW') {
      $audimodels.hide();
      $drivetrain.parent().hide();
      $models.parent().show();
      $bmwmodels.show();
    } else if (selectedValue == 'AUDI') {
      $bmwmodels.hide();
      $drivetrain.parent().hide();
      $models.parent().show();
      $audimodels.show();
    } else {
      $bmwmodels.hide();
      $audimodels.hide();
      $models.parent().hide();
      $drivetrain.parent().hide();
    }
    
     $(".chosen-select").trigger('chosen:updated');
  });


  //Hide onload
  function hide() {
    $models.parent().hide();
    $drivetrain.parent().hide();
    $bmwmodels.hide();
    $audimodels.hide();
  }
  
  // call hide AFTER .chosen() has been invoked on the visible elements
  $(".chosen-select").chosen({
    disable_search_threshold: 4
  });

  hide();

});

.chosen-select {
  width: 200px
}

.hidden {
  display: none;
}

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>

  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
</head>

<body>

  <table>
    <tr>
      <td>
        <select data-placeholder="Select Brand" class="chosen-select" id="s1">
          <option disabled selected></option>
          <option value="BMW">BMW</option>
          <option value="AUDI">AUDI</option>
          <option value="nothing" id="nothing">Nothing</option>
        </select>
      </td>
    </tr>

    <tr>
      <td>
        <select data-placeholder="Select Model" class="chosen-select" id="s2">
          <option disabled selected></option>
          <option value="nothing" id="nothing">Nothing</option>
          <option value="X1" id="X1">X1</option>
          <option value="X2" id="X2">X2</option>
          <option value="Q1" id="Q1">Q1</option>
          <option value="Q3" id="Q3">Q3</option>
        </select>
      </td>
    </tr>

  </table>

</body>

</html>

使用jQuery选择时隐藏选择列表选项值

1 个答案: