jquery select option default value hide and reappear

Question

I am hiding the default option in the option list when viewing all the options(1,2,3) (when click select 1st time) but then it needs to reappear somehow after making a selection and then viewing the options again..(only by page refresh can user view the select box as containing the category of 'bathroom' otherwise meaningless numbers 1,2,3 appear..)

I.e. Currently 'bathrooms' does not reappear once option is made and then the select box is clicked again..(if user changes mind) this is the issue. What is the best way to do this.

I can't change the html - this needs to be done ONLY with Jquery. Help please

<select name="searchForm__bathrooms" id="field-searchForm__bathrooms" class="field-    dropdown">
    <option value=""> Bathrooms </option>
    <option value="1"> 1 </option>
    <option value="3"> 3 </option>
    <option value="2"> 2 </option>
</select>

$('select option:first-child').hide();

_"What is the best way to do this."_ - Use a `` to display "Bathrooms" next to the select element instead of in an option element - if necessary insert it with jQuery. Also, note that some browsers don't let you hide option elements - I think in IE (and some others) you have to actually remove the option from the DOM. — nnnnnn, Jul 24 '12 at 02:05
What are you developing on where you can't modify the DOM? As per browser specs' you cannot hide option tag. There used to be a cross browser hack but it no loger works. http://jsfiddle.net/EfMvd/16/ — Erik Petersen, Jul 25 '12 at 00:34

score 1 · Accepted Answer · edited Dec 16 '16 at 13:57

1

http://jsfiddle.net/earlonrails/EfMvd/2/

Javascript

$(function() {
    $("#field-searchForm__bathrooms").change(function() {
        var selectEle = $(this);
        var doAppend = true;  
        $.each(selectEle.children(), function(index, child) {
            if (child.value == "0") {
                doAppend = false;
            }
        });
        if (doAppend) {
            selectEle.append('<option name="bathroom" value="0">Bathrooms</option>');
        }
    });
});

HTML

<body>
    <select name="searchForm__bathrooms" id="field-searchForm__bathrooms" class="field-dropdown">
        <option value="1"> 1 </option>
        <option value="2"> 2 </option>
        <option value="3"> 3 </option>
    </select>
</body>

edited Dec 16 '16 at 13:57

Zulu

8,765
9
49
56

answered Jul 24 '12 at 02:15

earlonrails

4,966
3
32
47

Thanks earlonrails, that is very close, however I cannot alter html [bathroom is also an option] and still need bathroom as default option.. I.e. 'bathroom' should appear exactly once under all circumstances. [dropdown viewed/not viewed, option 1,2,3 selected then dropdown viewed..] -- nnnnn, thanks Yes i understand that label should have this function, however as there is no room outside of selectbox - hence i didnt think this was easiest/good option.. – Nicolaas van den Broek Jul 24 '12 at 23:59
For select options there are problems when you try to use display properties across browsers, which is why I recommended appending node. Here is a post about the problems with options tags. http://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css. In my experience you can't hide options. Maybe a compromise like this would work for you. http://jsfiddle.net/earlonrails/EfMvd/12/ – earlonrails Jul 25 '12 at 00:29

score 0 · Answer 2 · edited Jul 24 '12 at 09:07

0

$("#field-searchForm__bathrooms").click(function(){
  $('select option:first-child').toggle();
})

edited Jul 24 '12 at 09:07

bluish

26,356
27
122
180

answered Jul 24 '12 at 02:06

Jonathan de M.

9,721
8
47
72

jquery select option default value hide and reappear

2 Answers2