CODEWITHSUNDEEP
javascripthtmljquerycss
Mike
Mike

Reputation: 59

JQuery Dropdown <select> CSS Manipulation

What I'm trying to accomplish here basically is to utilize JQuery to show / hide an element based on the option value of the dropdown .

In this case I've included a paragraph , as you can see "RED" is selected by default , now what I want to do here is to basically hide the paragraph if the rest of the options are selected (blue / black / pink) and for the paragraph to continue to be hidden even after a page refresh until "RED" is selected again ,

Thank you !

$(document).ready(function(){
    function Blue()
    {
    $(".visible").css("display", "none");
    }
    function Black()
    {
    $(".visible").css("display", "none");
    }
    function Pink()
    {
    $(".visible").css("display", "none");
    }
    $('#cars').on('change', function() {
    
      if ( $('#cars').val() == 'Blue' ) Blue();
      else if ( $('#cars').val() == 'Black' ) Black();
      else if ( $('#cars').val() == 'Pink' ) Pink();
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="cars">
    <option value="Red" selected="selected">Red</option>
    <option value="Blue">Blue</option>
    <option value="Black">Black</option>
    <option value="Pink">Pink</option>
</select>

<p class="visible"> Visible Paragraph </p>

Upvotes: 1

Views: 63

Answers (3)

charlietfl
charlietfl

Reputation: 171679

You can do this with a single jQuery chain that adds the change listener, sets value and then triggers the change event on page load

$('#cars').on('change', function(){    
    $('#info').toggle(this.value === 'Red');
    localStorage.setItem('car_color', this.value)
}).val(localStorage.getItem('car_color') || 'Red').change();// trigger change on page load

Storage supported fiddle demo

Upvotes: 0

bro
bro

Reputation: 165

You can use localStorage

<select id="cars" onchange="myFunction()">
    <option value="Red" selected="selected">Red</option>
    <option value="Blue">Blue</option>
    <option value="Black">Black</option>
    <option value="Pink">Pink</option>
</select>
<p id="par" class="visible"> Visible Paragraph </p>

<script type="text/javascript">
var x = document.getElementById("cars").value;
if (localStorage.getItem("color") == null) {
    localStorage.setItem("color", x)
}

function myFunction() {
    var x = document.getElementById("cars").value;
    localStorage.setItem("color", x)
    console.log(localStorage.getItem("color"))
    if (localStorage.getItem("color") === "Red") {
        document.getElementById("par").style.display = "block"
    } else {
        document.getElementById("par").style.display = "none"
    }

}
</script>

Upvotes: 0

a.mola
a.mola

Reputation: 4011

Using LocalStorage, you can save the value of the select and check on DOMContentLoaded

I used a function and ran it on the select's change and also on DOMContentLoaded

const select = document.getElementById('cars');
const paragraph = document.getElementById('visible');
const storageKey = 'carValue';

select.addEventListener('change', _ => checkvalue(select.value));
addEventListener('DOMContentLoaded', _ => checkvalue(localStorage.getItem(storageKey)));

function checkvalue(val) {
  if (val != 'Red') paragraph.style.display = 'none';
  else paragraph.style.display = 'all';

  localStorage.setItem(storageKey, val);
}
<select id="cars">
  <option value="Red" selected="selected">Red</option>
  <option value="Blue">Blue</option>
  <option value="Black">Black</option>
  <option value="Pink">Pink</option>
</select>

<p class="visible"> Visible Paragraph </p>

Upvotes: 1

Related Questions