CODEWITHSUNDEEP
javascriptjqueryhtmljquery-chosen
mugelloblue
mugelloblue

Reputation: 137

Hiding select list option values while using jQuery Chosen

I have created a simple app containing <select> lists which hide() or show() option values based on previous selections.

There are two lists, one with vehicle Makes and the other with vehicle Models. When a certain Make is selected, i.e. BMW, the next Make <select> appears only showing BMW models. And vice versa with Audi and so on.

Within the Models list, I have attached an ID to every <option> value and show or hide those <option> values based on previous selections. For example if BMW is selected, it will hide the two Audi model <option>'s, Q1 and Q3. If Audi is selected, it will hide the two BMW model <option>'s, X1 and X2.

I was successful in achieving this basic functionality; however, when I integrated jQuery's Chosen, it no longer worked. I really like Chosen and once I build out this app it will be very useful, so I would love to achieve the same functionality with it integrated.

Here is the simple code file:

<!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>

Any help would be greatly appreciated! Thanks so much.

Upvotes: 0

Views: 260

Answers (1)

Rikin
Rikin

Reputation: 5473

$(".chosen-select").trigger('chosen:updated'); You need to notify Chosen that your options have updated. This code updated Chosen to take care of updated options.

One thing to note however that it dont work to remove pre-select, you need to find solution within Chosen on how to remove pre-selection.

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

Upvotes: 1

Related Questions