I want to load extra data into each select option of Grails g:select taglib. Required output is like the following:
<select id="select">
<option value="1" data-foo="dogs">this</option>
<option value="2" data-foo="cats">that</option>
<option value="3" data-foo="gerbils">other</option>
</select>
I am not able to find a way to add the extra data to the taglib using the data attributes of HTML 5. So how to achieve the similar output?
You can do this by (mis-)using a closure to render the value (called optionKey in Grails select taglib) of the select options:
<g:select from="${books}"
optionKey="${{ book -> "${book.id}\" data-author=\"${book.author.name}"}}"
optionValue="title"
name="selectedBook"/>
This will render the options with a data-author attribute:
<option value="1" data-author="Johann Wolfgang von Goethe">Faust</option>
This works at least in Grails 2.4.4 and Grails 3.1.5.
The grails <g:select /> tag now has the dataAttrs attribute that takes a map which is converted to data attributes as follows:
<g:select from="${dogs}" dataAttrs="[foo: it.species]" name="dog" />
if each dog has an attribute called species whose values are as presented in the question, this code would yield...
<select id="select">
<option value="1" data-foo="dogs">this</option>
<option value="2" data-foo="cats">that</option>
<option value="3" data-foo="gerbils">other</option>
</select>
As mentioned by the comments above this is currently not possible. You need to write your own tag library to achieve this goal.
You can achieve similar result using the following
<select id="select">
<g:each in="${books}" var="book">
<option value="${book.id}" data-foo="${book.slug}">${book.name}</option>
</g:each>
</select>
Related
I have a simple HTML form with a select element. The purpose is this is to use Wordpress's built in query parameters to allow users to sort the posts in an archive. Date Added, Title, etc.
<form action="" method="GET">
<label id="sortLabel" for="orderby">Sort Songs:</label>
<select name="orderby" id="sortbox">
<option disabled selected>Sort by:</option>
<option value="date&order=asc">Oldest First</option>
<option value="date&order=dsc">Newest First</option>
<option value="title&order=asc">Alphabetical (A-Z)</option>
<option value="title&order=dsc">Alphabetical (Z-A</option>
</select>
<input type="submit" value="Filter" />
</form>
The option values are being passed through to the URL fine, but the URLs are encoding, causing the URL to look like this:
www.example.com/songs/?orderby=date%26order%3Dasc
Instead of this:
www.example.com/songs/?orderby=date&order=asc
This is simply how HTML forms work.
The value attributes are arbitrary text. The browser is sending the form request to www.example.com/songs/?orderby=<value>, where you happen to be setting the <value> to "date&order=asc", "date&order=dsc", etc.
The orderby's value has to make it to the server intact. & and = are reserved characters in a URL's query component, so that is why they are being percent-encoded when the orderby field is added to the URL query, thus allowing the server to properly receive the <value> that the user selected for orderby in the HTML.
To do what you want, you need to treat orderby and order separately in the HTML. I would add a separate <select> for order, eg:
<form action="" method="GET">
<label id="sortLabel" for="orderby">Sort Songs:</label>
<select name="orderby" id="sortbox">
<option disabled selected>Sort by:</option>
<option value="date">Date</option>
<option value="title">Title</option>
</select>
<select name="order" id="sortbox">
<option disabled selected>Order by:</option>
<option value="asc">Oldest First, Alphabetical (A-Z)</option>
<option value="dsc">Newest First, Alphabetical (Z-A)</option>
</select>
<input type="submit" value="Filter" />
</form>
If you wanted to make the order list a little cleaner, you could use client-side scripting to manipulate the display texts of the order options whenever the user selects a different orderby option.
Validation occurs:
<select name="fruit" required>
<option value="" selected> Select a fruit </option>
<option value="apple"> Apple </option>
</select>
Validation never happens:
<select name="fruit" required>
<option value="apple"> Apple </option>
<option value="" selected> Select a fruit </option>
</select>
Question
Why HTML doesn't considers the validation of required attribute in all cases that an empty option are selected?
Because its trying to treat the first element, since it's value is empty, as a placeholder label option, not a option to be selected, and therefore selecting it does not satisfy the "required" constraint.
You are right as default HTML5 validator will only check the value of the first selectable if you mark the input as required.
https://www.w3schools.com/code/tryit.asp?filename=FNP50ZBTEYOE
To modify this, you will need to use another validator and customize it by some code as well.
jQuery Validate Required Select
i'm developing an asp.net/vb.net webapp.
I've an html table with some columns.
I get the values of the cells from a database, so i've a dinamically number of rows.
In columns i need to put a tag, because i want to allow the user to change the value of that cell.
Of course the initial value of the select should have to come from the query, but i dont know how to do this.
Something like
...
<td> <select selected="<%= queryresult("id").value %>">
<option value="1"> option1 </value>
<option value="2"> option2 </value>
</select></td>
...
but obv not working.
I just hope you understand what i want.
Thanks.
You can find the solution for your problem posted here but implemented with PHP. Anyway you can do it with ASP.NET as well. Basically you have to check if the current option value has the value from the query and add selected="selected" to the specific option tag. Also the correct markup for a select is like this:
<select>
<option value="1" selected="selected">Option 1</option>
<option value="2">Option 2</option>
</select>
I have a simple html select drop down like this
<select name="day">
<option value="1" selected="selected">Monday</value>
<option value="2">Tuesday</value>
</select>
How do i read the value of the selected option in my controller class in ruby on rails.
you can access all form fields with params[:field_identifier]
I m working on a application for mail sending and need to use select tag of HTML with showing multiple options (But select only one at a time).
I tried multiple='multiple' but it is showing only one option and arrow disappears form select box.
<select multiple="multiple">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
You may need to include a "size" in addition to the "multiple" attribute, in order to show more than one option at a time. Try something like this:
<select multiple="multiple" size="10">
<option value="...">...</option>
...
</select>
As an alternative, since you want only one option selectable, you could consider using a list of radio buttons. For example,
<input type="radio" name="auto" value="Audi" />Audi<br />
<input type="radio" name="auto" value="Honda" />Honda<br />
...