I have been hitting a brick wall on this for about an hour now. I have a list of counties that I build and add to my view data (counties) and then render the list with a: html.DropDownList('invoice.county', counties) in my view.
It appears to render correctly but FF REFUSES to set the selected item. I have tried swapping the values out for integers (so they don't match the display text) and that did not work. FF just displays the first item in the list
<select id="invoice_county" name="invoice.county">
...
<option value="Lander">Lander</option>
<option selected="selected" value="Laramie">Laramie</option>
<option value="Larimer">Larimer</option>
...
</select>
I have trimmed the values to the ones surrounding the selected item.
Can anyone give me insight into this????
Firefox has a weird bug/feature that means if you just refresh the page, it will select the option already selected regardless of whether the selected attribute is on another option. For example, if I put in:
<select id="invoice_county" name="invoice.county">
<option value="Lander">Lander</option>
<option selected="selected" value="Laramie">Laramie</option>
<option value="Larimer">Larimer</option>
</select>
Saved and refreshed in Firefox, then put:
<select id="invoice_county" name="invoice.county">
<option selected="selected" value="Lander">Lander</option>
<option value="Laramie">Laramie</option>
<option value="Larimer">Larimer</option>
</select>
instead and just refreshed after saving, it would keep "Laramie" selected. To stop this, try Ctrl-F5 rather than just F5 or refresh.
If you are using XHTML, you need a valid attribute/value pair:
<option selected="selected" value="x">
If you are using HTML, the mere presence of the attribute is enough:
<option selected value="x">
More information on W3C.
Related
I'm new to HTML and trying to use a datalist. I need to limit it to display only 5 items and the rest to be viewed using scrolldown. Is there any way?
My code :
<form>
<input list="Android" name="Android">
<datalist id="Android">
<option value="Alpha">
<option value="Beta">
<option value="Cupcake">
<option value="Doughnut">
<option value="Eclairs">
<option value="Fryo">
<option value="GingerBread">
<option value="HoneyComb">
<option value="Icecream Sandwich">
<option value="Jelly Bean">
<option value="Kitkat">
<option value="Lollipop">
<option value="Marshmallow">
<option value="Nougat">
</datalist>
<input type="submit">
</form>
This is the output of my code
Thanks in advance!
Well, that's not possible to do, the datalist layout is defined by the browser the same as it does with the select tag and there is very little flexibility on customization. Your example comes from Chrome; in Firefox, it shows only 6 items and on Edge it shows something similar with limited size as well.
The proposed solution is using something else rather that using datalist, if you can't live with the datalist design Chrome offers, try some other component with a similar behavior, like dropdown select, autocomplete, autosugest, typeahead, etc.
My HTML table is simple. When I click on an option thats visible in the select box, it selects fine however, when I click on an option thats not visible / out of view, the list of options simply scrolls to the top and I get nowhere. The option wont mark as selected even though its highlighted.
This only seems to be a problem with Chrome though as it works fine in FF.
<select class="propertytype" multiple>
<option value="Villa">Villa</option>
<option value="Hotel">Hotel</option>
<option value="HotelVillas">Hotel Villas</option>
<option value="Apartment">Apartment</option>
<option value="Private">Private</option>
<option value="Villa&ApartmentSales">Villa & Apartment Sales</option>
<option value="NewDevelopments">New Developments</option>
</select>
I have a problem with multiselect box on iPhone Safari. When I open the multiselect box it automatically selects the first option. Here is the code snippet that i am using:
<select multiple>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
I have added a blank option with the disabled attribute (see below from here) as the first option but it didn't work in iPhone Safari. I am using an iPhone 6s+:
<option disabled></option>
disable=disable
just add it in option so that no one will be able to access that option
<option selected=selected value="test0">Pick an option</option>
Use the attribute selected to specify that this option should be the one selected. Or put the first one you want to see selected by default at the top of your list.
disabled attribute will, well i know how unprobable it sounds, disable your select option, thus means it will not be able to be selected.
I have the following HTML code used to create on a page:
<select>
<option value="" selected>test</option>
<option value="test2">test2</option>
</select>
But when looking at the HTML in Google Chrome's DOM inspector it looks like this:
<select>
<option value selected>test</option>
<option value="test2">test2</option>
</select>
See the difference? For the first <option>...</option>, value="" is turned into just value. The value, when set to the empty string is simply discarded. Is there any way to set the value of an option tag to the empty string? I need this because I'm pulling elements out of a database to create a <select> menu. Each <option> will have it's value set to value of a database element and some of those elements have the empty string as their value.
It is just Google Chrome's DOM inspector's notation (removes '=""' from attributes). If you inspect it with FireBug or simply view the source then you will see it is OK.
Your sample code produces this in Google Chrome:
And this is the result in FireFox:
So don't worry about that.
bob
as Hanky said you can use
selected = "selected" or ""
so the code will be :
<select>
<option value="" selected="selected">test</option>
<option value="test2">test2</option>
or
<select>
<option value="" selected="">test</option>
<option value="test2">test2</option>
Checking this article may help :
W3 option language reference
<option value="" selected="selected">test</option>
This means value is empty string. Even if dom inspector in chrome shows you like that
Is it possible to dynamicaly resize the visible options in select tag in forms? I have the example:
<select size="1">
<option value='1'>1
<option selected value='2'>2
<option value='3'>3
<option value='4'>4
</select>
I would like to have visible all options (to setup size dynamically with css) when design page for printing. And also to see selected option(s) in another design (color, bold ...). For resize I tried:
select{
size:4;
}
but it doesn't work. I need a working solution at least for FF, IE, Safari ...
Do have any idea?
Thanks in advance!
You can use this way:
<select size="1" size="4">
<option value='1'>1</option>
<option selected value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
And don't forget to close the </option>