1

I am wanting to hide a span/div when a select option is selected.

Ok, so there are a bazillion of these already listed here at SO.

But none that I can find seem to address the issue of only having two <options> and clicking on the first <option> cause the entire span/div to hide.

Example of what I have: 

<span id="showPrivacy" style="cursor:pointer;">
  show privacy
</span>
<span id="displayPrivacy" style="display:none">
  <select name="privacy" id="privacy">
    <option value="members">members</option>
    <option value="friends">friends only</option>
  </select>
</span>

and

$("#showPrivacy").click(function(){
        $("#displayPrivacy").toggle();
});
$('#privacy').change(function() {
        if($('#privacy').val() == 'members') {
                $('#displayPrivacy').hide(); 
        } else if($('#privacy').val() == 'friends') {
                $('#displayPrivacy').hide(); 
        } 
        else {
                console.log('value: unknown');
        }
});

demo: https://jsfiddle.net/kox05o1n/6/

If you click on the first option, the members option, the change() does not fire because the value has not actually changed.

So, my question here is simply, how do I get the span/div with id displayPrivacy to hide when the user clicks members, even if the members is the default option value?

I do not want to add a null <option> at the top of the options list to solve this situation.

Abela
  • 1,225
  • 3
  • 19
  • 42
  • 2
    You need to post a [mcve] *in your question* first. Fiddles are an optional second. You also forgot to include jQuery in your fiddle. – j08691 Jul 01 '16 at 17:27
  • @medinasod -- if the `change` is switched to `on` as soon as you click the 'members' (to have it drop down the options) it would/does hide the entire span/div, as a result of that option being selected. – Abela Jul 01 '16 at 17:44
  • @Abela: i have refined and commented the code check my last updated code... hope this help. ;) – Luca Filosofi Jul 01 '16 at 20:04

3 Answers3

1

i think you are doing something wrong here, first of all your code is doing the same thing in both cases, even if you click on members or friends you are hiding the same div so there is no reason to make a check on the selected option...

for simplicity, i suggest to use the blur event so the div is hided in any case as soon as the user click outside the select.

$('#privacy').on('blur', function() { 
    $("#displayPrivacy").hide();
});

otherwise you have to use something more tricky like this

demo : https://jsfiddle.net/cwumLsa1/

$("#showPrivacy").on('click',function(){
    $("#displayPrivacy").toggle();
});

// check for select clicks since first click open the select, 
// the second will be for the option...
var privacy_count_click = 0;

$('#privacy').on('click', function() {
   // if click is greater then 0 this 
   // means user clicked on one of the 2 options
   // so, let's hide the div and reset the counter
   if(privacy_count_click > 0){
         $("#displayPrivacy").hide();
         privacy_count_click = 0;
   } else {
        privacy_count_click++; 
   }
});
Luca Filosofi
  • 30,905
  • 9
  • 70
  • 77
  • Hey Luca, thanks for this. I can confirm that both solutions work, each in their own way. The first, as you said, works great for those who might not care about having the div immediately hide. For my situation, and the basis of this question, the second set of code you presented does solve the question. So thank you for that. Totally understand the code and approach, but it did make me go "meh?" at the method of solution when I first looked at it. Not exactly the normal way of solving things, eh. Sweet that it works though. Thinking outside the box (y) – Abela Jul 01 '16 at 20:47
  • Still not working correctly on chrome.. – Yuri Jul 02 '16 at 20:57
  • I have personally tested it on chrome and it's working... – Luca Filosofi Jul 03 '16 at 08:01
  • On dom ready, I click on "Show privacy" and dropdown appears (members is selected by default) but if I click members nothing happens... I have to blur the element to let it hide – Yuri Jul 03 '16 at 16:09
0

You just have to handle click() event on <option> instead of change() on <select>:

$('#privacy option').click(function() {
    var current = $(this).val();
    if(current == 'members') {
        $('#displayPrivacy').hide(); 
    } else if(current == 'friends') {
        $('#displayPrivacy').hide(); 
  } 
  else {
    console.log('value: unknown');
  }
});

Fiddle

Yuri
  • 3,082
  • 3
  • 28
  • 47
  • Hey Yuri, that seems to work in IE/FF/Safari but not Chrome, at least not for me. Also seems to be confirmed here: http://stackoverflow.com/questions/5749597/jquery-select-option-click-handler#comment45510537_5749653 Any other solution that would be able to make it work also in Chrome? – Abela Jul 01 '16 at 18:12
  • I would suggest to use a plugin for select dropdown, like [select2](http://select2.github.io/), which always return the clicked element – Yuri Jul 01 '16 at 19:15
  • @Yuri: hi Yuri, this does not work and the code is redundant... – Luca Filosofi Jul 01 '16 at 20:08
  • What is not working? With just two options you can keep the if-elseif-else. Since I don't have any more info, I just keep his structure – Yuri Jul 02 '16 at 20:48
0

It looks like from this SO post below, it's not occurring

because the change event requires an actual browser event initiated by the user instead of via javascript code.

Why does the jquery change event not trigger when I set the value of a select using val()?

I've updated the fiddle https://jsfiddle.net/kox05o1n/12/ to the functionality I think you're looking to accomplish.

Community
  • 1
  • 1
Andrew Heyman
  • 1
  • 1