CODEWITHSUNDEEP
jqueryselect
varzesht
varzesht

Reputation: 25

Dont show default text on two select options

Dont show text default in value="beaches" on value="chill"and other value="chill". I want to display the default value Demo

jQuery('#preference, #style').on('change', function() {
  // set reference to select elements
  var preference = jQuery('#preference');
  var style = jQuery('#style');

  // check if user has made a selection on both dropdowns
  if (preference.prop('selectedIndex') > 0 && style.prop('selectedIndex') > 0) {
    // remove active class from current active div element
    jQuery('.result.active').removeClass('active');

    // get all result divs, and filter for matching data attributes
    jQuery('.result').filter('[data-preference="' + preference.val() + '"][data-style="' + style.val() + '"]').addClass('active');
  }
});
.result {
  display: none;
}

.result.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="preference">
  <option value="beaches">beaches</option>
  <option value="museums">museums</option>
  <option value="mountains">mountains</option>
</select>
<select id="style">
  <option value="chill">chill</option>
  <option value="fast-paced">fast-paced</option>
  <option value="both">both</option>
</select>

<div class="result" data-preference="beaches" data-style="chill">beaches and chill, show text Default</div>
<div class="result" data-preference="beaches" data-style="fast-paced">beaches and fast-paced</div>
<div class="result" data-preference="beaches" data-style="both">beaches and both</div>
<div class="result" data-preference="museums" data-style="chill">museums and chill</div>
<div class="result" data-preference="museums" data-style="fast-paced">museums and fast-paced</div>
<div class="result" data-preference="museums" data-style="both">museums and both</div>
<div class="result" data-preference="mountains" data-style="chill">mountains and chill</div>
<div class="result" data-preference="mountains" data-style="fast-paced">mountains and fast-paced</div>
<div class="result" data-preference="mountains" data-style="both">mountains and both</div>

Upvotes: 0

Views: 57

Answers (3)

KL_
KL_

Reputation: 1513

If you want to display the text in the div if you select beaches and chill, just update your if:

if (preference.prop('selectedIndex') >= 0 && style.prop('selectedIndex') >= 0)

If you want to display without even clicking, call your function in [$(document).ready();][1]
See below: 

function check() {
  // set reference to select elements
  var preference = jQuery('#preference');
  var style = jQuery('#style');

  // check if user has made a selection on both dropdowns
  if (preference.prop('selectedIndex') >= 0 && style.prop('selectedIndex') >= 0) {
    // remove active class from current active div element
    jQuery('.result.active').removeClass('active');

    // get all result divs, and filter for matching data attributes
    jQuery('.result').filter('[data-preference="' + preference.val() + '"][data-style="' + style.val() + '"]').addClass('active');
  }
}

$(document).ready(check);

jQuery('#preference, #style').on('change', check);
.result {
  display: none;
}

.result.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="preference">
  <option value="beaches">beaches</option>
  <option value="museums">museums</option>
  <option value="mountains">mountains</option>
</select>
<select id="style">
  <option value="chill">chill</option>
  <option value="fast-paced">fast-paced</option>
  <option value="both">both</option>
</select>

<div class="result" data-preference="beaches" data-style="chill">beaches and chill, show text Default</div>
<div class="result" data-preference="beaches" data-style="fast-paced">beaches and fast-paced</div>
<div class="result" data-preference="beaches" data-style="both">beaches and both</div>
<div class="result" data-preference="museums" data-style="chill">museums and chill</div>
<div class="result" data-preference="museums" data-style="fast-paced">museums and fast-paced</div>
<div class="result" data-preference="museums" data-style="both">museums and both</div>
<div class="result" data-preference="mountains" data-style="chill">mountains and chill</div>
<div class="result" data-preference="mountains" data-style="fast-paced">mountains and fast-paced</div>
<div class="result" data-preference="mountains" data-style="both">mountains and both</div>

Or, you can use the same logic. Creating one empty option to your select tag:

<select id="preference">
  <option value=""></option>
  <option value="beaches">beaches</option>
  <option value="museums">museums</option>
  <option value="mountains">mountains</option>
</select>
<select id="style">
  <option value=""></option>
  <option value="chill">chill</option>
  <option value="fast-paced">fast-paced</option>
  <option value="both">both</option>
</select>

Upvotes: 2

Leo
Leo

Reputation: 680

you can use this:

<option disabled selected value> -- select an option -- </option>

Example

<select>
    <option disabled selected value> -- select an option -- </option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Upvotes: 0

Robert Fridzema
Robert Fridzema

Reputation: 523

You can append an option without a value for a default text like so:

<select id="style">
    <option>default text</option>
    <option value="chill">chill</option>
    <option value="fast-paced">fast-paced</option>
    <option value="both">both</option>
</select>

Upvotes: 0

Related Questions