Remove working on JQuery options, Hide does not?

Question

Got this HTML:

<select class="trackChanges department" id="DepartmentID_0" name="DepartmentID_0">
    <option value="3">DC</option>
    <option value="5">PL</option>
    <option value="7">SA</option>
</select>

Iterating over the options with this javascript & jQuery:

var departmentDDL = $(row).find('[id*="DepartmentID_"] > option');

departmentDDL.each(function () {
    if ($(this)[0].innerHTML != "SA") {
        $(this).hide();    // this does not work
        $(this).remove();  // this works
    }
});

I'm trying to hide the options, not remove them. Why does one work and not the other?

It's because support for hiding `option` elements is notoriously flakey across browsers. If you can avoid it, I would. — Rory McCrossan, Nov 21 '17 at 16:41
@user2486 Good spot, but that's a typo in the question - it's not in the original code. — Bob Tway, Nov 21 '17 at 17:01

cнŝdk · Answer 1 · 2017-11-21T16:57:25.200

4

You have an extra ( in your if, remove it, it will work but only in Chrome with a little buggy behavior.

var departmentDDL = $('[id*="DepartmentID_"] > option');

departmentDDL.each(function() {
  if ($(this)[0].innerHTML != "SA") {
    $(this).hide(); // this does not work
    //$(this).remove();  // this works
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="trackChanges department" id="DepartmentID_0" name="DepartmentID_0">
    <option value="3" >DC</option>
    <option value="5">PL</option>
    <option value="7">SA</option>
</select>

Note that hiding HTML options has several issues cross browser and won't give expected results in some browsers, for further details check How to hide a <option> in a <select> menu with CSS?

edited Nov 21 '17 at 16:57

answered Nov 21 '17 at 16:47

cнŝdk

31,391
7
56
78

"Everything works perfectly" rather overstates the case. This does not work at all in Safari. Only sort of works in Chrome and Firefox (the default value still appears before user click, even though it should be hidden.) – Daniel Beck Nov 21 '17 at 16:50
@DanielBeck I mentioned that under the Snippet. – cнŝdk Nov 21 '17 at 16:51
Edited answer is slightly better but still misleading: it doesn't work perfectly in Chrome. The original default value is visible before user click, should be hidden. – Daniel Beck Nov 21 '17 at 16:55

Niklesh Raut · Answer 2 · 2017-11-21T17:44:55.393

0

remove extra ( here if (($(this)[0] and it will work

var departmentDDL = $('[id*="DepartmentID_"] > option');

departmentDDL.each(function () {
    if ($(this)[0].innerHTML != "SA") {
        $(this).hide();    // this does not work
        //$(this).remove();  // this works
    }else{
      $(this).parent().val($(this).val()).change();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="trackChanges department" id="DepartmentID_0" name="DepartmentID_0">
    <option value="3">DC</option>
    <option value="5">PL</option>
    <option value="7">SA</option>
</select>

It selected in the else part

edited Nov 21 '17 at 17:44

answered Nov 21 '17 at 16:55

Niklesh Raut

34,013
16
75
109

See comments on other answer; this does not work correctly in some browsers. – Daniel Beck Nov 21 '17 at 16:55
@DanielBeck : its working with selected item `$(this).parent().val($(this).val()).change();` – Niklesh Raut Nov 21 '17 at 16:56
Not in Safari. I stand corrected though, that it does seem to work in FF and Chrome. – Daniel Beck Nov 21 '17 at 16:58
@Daniel Beck: I tested in chrome, I don't have safari, also SO dint mention about this. Can you help here for safari. Not for me , for others. – Niklesh Raut Nov 21 '17 at 17:16
TBH I think the actual, correct answer to the question was posted by Rory as the very first comment: "It's because support for hiding option elements is notoriously flakey across browsers. If you can avoid it, I would." That said if you want to edit this answer to mention the safari breakage I'll remove my downvote (I'm outside the time window for retracting a vote without an edit.) – Daniel Beck Nov 21 '17 at 17:21
@Daniel Have edited if you want to revert your downvote – Niklesh Raut Nov 21 '17 at 17:46
....it still doesn't mention the fact that this doesn't work in Safari, but fine, here are your two points back – Daniel Beck Nov 21 '17 at 17:55
It's not about the point, as I said I don't have safari. And it's also not mentioned by OP. Also you got your 1 point back ;) – Niklesh Raut Nov 21 '17 at 18:00
Whether you personally have safari or not isn't relevant. Neither is whether the OP mentioned it or not. That the answer, as it stands, is factually incorrect is the point. ("It will work" [except in at least one major current browser]) – Daniel Beck Nov 21 '17 at 18:33

Remove working on JQuery options, Hide does not?

2 Answers2