html select doesn't display default option

Question

I have a select which doesn't show 'Default' option. It looks like this:

<select id="sortBy" name="sortBy" onchange="if(guestLightbox()) {sortPropertyBy(this.value);}">
<option class="quality_score_member hideWhenResaleMLS" value="quality_score_member-desc">Default</option>
<option class="auction_date hideWhenForeclosures hideWhenPreForeclosures hideWhenResaleMLS hideWhenFSBOOrRentalOrRTO" value="auction_date">Auction Date</option>
<option class="home_score-desc" value="home_score-desc">SmartZip HomeScore</option>
<option class="investor_score-desc" value="investor_score-desc">SmartZip InvestorScore</option>
<option class="amount" value="amount">Price (low to high)</option>
<option class="amount-desc" value="amount-desc">Price (high to low)</option>
<option class="living_area_square_feet" value="living_area_square_feet">Square Feet (low to high)</option>
<option class="living_area_square_feet-desc" value="living_area_square_feet-desc">Square Feet (high to low)</option>
<option class="scrape_date-desc" value="scrape_date-desc">Most Recent</option>
<option class="sale_type" value="sale_type">Sale Type</option>
<option class="property_record_type" value="property_record_type">Property Type</option>
</select>

Could somebody explain why?

Thanks.

What do the CSS classes quality_score_member hideWhenResaleMLS contain? — Pekka
– Pekka, Commented Mar 7, 2012 at 11:12
you were right it is because of the class but dont know why. — George
– George, Commented Mar 7, 2012 at 11:35
sorry bro I tried but it doen't allow me to accept it anymore. will do it next time :) — George
– George, Commented Mar 8, 2012 at 21:28

Pekka · Accepted Answer · 2012-03-07 12:20:54Z

2

The only reason I can see for this is one of your CSS classes

quality_score_member hideWhenResaleMLS

defining a display: none, visibility: hidden, or some other element-hiding CSS property.

Edit: turns out it's jQuery removing the option. Well, that was the other only possible reason ;)

edited Mar 7, 2012 at 12:20

answered Mar 7, 2012 at 11:36

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

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

3 Comments

George Over a year ago

When I am viewing in Elements section of Google Chrome that element is just excluded.

George Over a year ago

just doesn't appear. I found where it comes from $('.hideWhen${saleCategoryType}').remove(); thanks you where right

Pekka Over a year ago

@George that's the reason then. Why that is in your code, I don't know - I'm sure it has a purpose

trex005 · Accepted Answer · 2012-03-07 11:19:51Z

1

I have seen this error quite a few times when someone is developing a page and refreshing to see the updates. Your browser will usually display whatever option you had selected last. This includes if you add an option above or below the previously selected option.

Try going to the page again from scratch (not using refresh) and tell us if that solves your problem.

answered Mar 7, 2012 at 11:19

trex005

5,1354 gold badges32 silver badges42 bronze badges

1 Comment

George Over a year ago

no no that's not an issue. In fact, there are several different tabs that consume this HTML and only one of them is not displaying the first option.

score 0 · Accepted Answer · 2012-03-07 11:53:20Z

0

Try the attribute SELECTED (or, respectively, selected='selected' or alike [upd]) with OPTION.

edited Mar 7, 2012 at 11:53

answered Mar 7, 2012 at 11:29

user1099383

Comments

Dirty-flow · Accepted Answer · 2014-03-11 08:51:14Z

Working here on Jsfiddle

<select id="sortBy" name="sortBy" onchange="if(guestLightbox()) {sortPropertyBy(this.value);}">
    <option class="quality_score_member hideWhenResaleMLS" value="quality_score_member-desc">Default</option>
    <option class="auction_date hideWhenForeclosures hideWhenPreForeclosures hideWhenResaleMLS hideWhenFSBOOrRentalOrRTO" value="auction_date">Auction Date</option>
    <option class="home_score-desc" value="home_score-desc">SmartZip HomeScore</option>
    <option class="investor_score-desc" value="investor_score-desc">SmartZip InvestorScore</option>
    <option class="amount" value="amount">Price (low to high)</option>
    <option class="amount-desc" value="amount-desc">Price (high to low)</option>
    <option class="living_area_square_feet" value="living_area_square_feet">Square Feet (low to high)</option>
    <option class="living_area_square_feet-desc" value="living_area_square_feet-desc">Square Feet (high to low)</option>
    <option class="scrape_date-desc" value="scrape_date-desc">Most Recent</option>
    <option class="sale_type" value="sale_type">Sale Type</option>
    <option class="property_record_type" value="property_record_type">Property Type</option>
</select>

Collectives™ on Stack Overflow

html select doesn't display default option

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related