JQuery Dropdown <select> CSS Manipulation

Question

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>

@charlietfl forgot to add the whole code into the post , thanks for that ! — Mike
– Mike, Commented Apr 4, 2021 at 14:50
Also need a bit of clarity regarding page refresh. Is Red always selected as default? Or will refresh perhaps change that — charlietfl
– charlietfl, Commented Apr 4, 2021 at 14:53
I feel like you would need to create a COOKIE session to store the selected value, if you want the value to remain the same even after a refresh? — Anake.me
– Anake.me, Commented Apr 4, 2021 at 14:56
@Anake.me exactly , that's what I'm trying to achieve here , so basically if a user selects Blue and hits refresh , Blue will now be selected — Mike
– Mike, Commented Apr 4, 2021 at 14:57

a.mola · Accepted Answer · 2021-04-04 14:58:37Z

1

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>

answered Apr 4, 2021 at 14:58

a.mola

4,0119 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mike Over a year ago

thanks for sharing , I tried running the snippet but an error keeps showing , can you please check again ?

a.mola Over a year ago

The snippet doesn't allow localStorage to be used because it is sandboxed. Create a file and the code on your browser.

bro · Accepted Answer · 2021-04-04 15:05:59Z

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>

charlietfl · Accepted Answer · 2021-04-04 15:19:01Z

0

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

answered Apr 4, 2021 at 15:19

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

JQuery Dropdown <select> CSS Manipulation

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related