https://jsfiddle.net/53jprgse/
I'm not able to get dynamic select option value attributes set using Vue 2.0.3 and :value or v-bind:value bindings. No option values are being set when I use these.
I have to add the static html value="" or value="some value" attribute to get option value attributes to render their dynamic values.
My data set is a simple array of strings.
This is illustrated by inspecting the select elements at the fiddle above.
Can someone tell me what I'm missing here? Seems like this should be very straight forward.
If you want the DOM to actually have the value attribute set by v-bind you have to actually add the value attribute (doesn't matter what it says).
So, in your first 2 selects you basically had this:
<div>
<p>
:value="county"
</p>
<select v-model="filterByCounty">
<option value="">Filter by county...</option>
<option v-for="county in counties" :value="county">
{{ county }}
</option>
</select>
{{ selected_county }}
</div>
If you just add a value to the <option> it will work as you'd like:
<option v-for="county in counties" :value="county" value="">
Related
I just recently started using Thymeleaf through one of my projects. I have seen few examples where th:text=${example} is being used in some places th:value=${example}.
I have gone through the Thymeleaf documentation but couldn't find anything explicitly citing the difference, nor did any question on SO.
Any help would be really appreciated! Thanks.
th:value is modification of html attribute value.
For button, input and option elements, the value attribute specifies the initial value of the element
th:text is used for tag body modification.
div{background-color: lightblue; padding: 2px} // to highlight empty div
<!--th code: <div th:value="${value}"/></div> -->
<br/>Result th:value div: <div value="sometext"/></div>
<!--th code: <form><input th:value="${value}"/></form>-->
<br/>Result th:value form: <form><input value="sometext"></form>
<!--th code: <div th:text="${value}"></div>
Same as: <div>[[${value}]]</div> -->
<br/>Result th:text div: <div>sometext</div>
Here is docs of different Thymeleaf attributes features
Lets see an example:
<input type="radio" name="gender" value="male"> Male<br>
if we want to use thymeleaf in value portion of this input tag, then we will use,
<input type="radio" name="gender" th:value="${someValue}"> Male<br>
if we want to see the text (here Male) sent from the controller dynamically, then we use,
<input type="radio" name="gender" th:text="${someText}""> <br>
th:name => This would be the name of the value that you will be passing to another page (Exemplar scenario).
th:value => This would be the actual value that you would be passing. It could be obtained from a model or straight from the database explicitly.
<form th:action="#{confirm-pass-details.html}">
<button type="submit" th:name="event-id" th:value="${event.get().getEventid()}">Buy Passes</button>
</form>
I have a dropdown that I want to be able to change which id to pass to a path.
Dropdown
<select id="student-selection">
<option value="1">Frank</option>
<option value="2">Bill</option>
</select>
Link
<%= link_to "Create Pet", new_student_pet_path(:id_from_select_dropdown) %>
How is this possible? I'm guessing that I should use coffeescript in some way but I can't figure out a good way besides just parsing the link string and replacing an ID.
I'm also willing to use a div with onclick event if that would make it easier instead of an anchor.
I discovered a good way of doing it. I just put the URLs in the select options as the values instead of using the IDs via the path functions. This way in the coffeescript I just need to set the window.location to the value of the selected option.
HTML
<select id="student-selection">
<option value="/students/1/pets/new">Frank</option>
<option value="/students/2/pets/new">Bill</option>
</select>
CoffeeScript
$ ->
$('btn-id').click ->
window.location = $('#student-selection').children("option").filter(":selected").val()
I'm trying to use custom data attributes of HTML in Struts2 tags
here is my sample code
<s:select list="myList" listKey="myListVal" listValue="myListDesc" data-inputs="myListInput" ></s:select>
i was expecting something like this for example
<select >
<option value="myListVal1" data-inputs="myListInput1">myListDesc1</option>
<option value="myListVal2" data-inputs="myListInput2">myListDesc2</option>
<option value="myListVal3" data-inputs="myListInput3">myListDesc3</option>
</select>
instead I'm getting this
<select data-inputs="myListInput" >
<option value="myListVal1" >myListDesc1</option>
<option value="myListVal2" >myListDesc2</option>
<option value="myListVal3" >myListDesc3</option>
</select>
Is it possible to describe data-attribute in struts select tags for Options inside it.
Override the <s:select> tag template. Or just use HTML tags with <s:iterator>
<select name="list">
<s:iterator value="myList" status="stat">
<option value="<s:property value="myListVal"/>" data-inputs="myListInput<s:property value="#stat.index"/>"><s:property value="myListDesc"/></option>
</s:iterator>
</select>
You can't inject custom attributes into a Struts2 UI Tag directly.
According to Dave Newton's comment, you can with Struts2 >= 2.1.x
But still it's not possible to apply them to the option elements instead of the select, so I'll leave the answer in case you need to extend the original select tag to define a custom behaviour (like apply certain attributes to the options).
You can extend the <s:select> Struts2 tag to allow it to manage new kind of attributes...: http://bodez.wordpress.com/2009/03/13/customising-struts2-jsp-tags/
,
or create your own tag directly, but in your case would be overkill: http://joshuajava.wordpress.com/2008/12/27/creating-custom-components-with-struts-2/).
Last but not least, you could even add your custom attributes once the page is rendered, using something like jQuery (demo: http://jsfiddle.net/CLNDs/ ); they will be accessible, but not visible in source.
I'm using Freemarker as the templating engine for a Struts 2 application and having some problems trying to pass a Freemarker hash to the #s.select tag's list value.
Currently I'm trying something like this in my template:
<#s.select name="myDropdown" list={"1":"Foo", "2":"Bar", 3:"Baz"} />
The resulting HTML that's rendered is this:
<select name="myDropdown" id="myDropdown">
<option value="freemarker.ext.beans.HashAdapter$1$1$1#2c9bebb">freemarker.ext.beans.HashAdapter$1$1$1#2c9bebb</option>
<option value="freemarker.ext.beans.HashAdapter$1$1$1#16ca4a">freemarker.ext.beans.HashAdapter$1$1$1#16ca4a</option>
<option value="freemarker.ext.beans.HashAdapter$1$1$1#173ee8">freemarker.ext.beans.HashAdapter$1$1$1#173ee8</option>
</select>
Based on the documentation it seems like this should work, but really the only examples are of using Freemarker lists. Hashes are only mentioned as another option, but I haven't been able to find any code examples that use them.
Ultimately my question is, what Freemarker syntax should I use with the Struts 2 select tag in order to render the following HTML?
<select name="myDropdown" id="myDropdown">
<option value="1">Foo</option>
<option value="2">Bar</option>
<option value="3">Baz</option>
</select>
Using the listKey and listValue properties of the select tag seems to do the trick.
The working code is now:
<#s.select name="myDropdown" list={"1":"Foo", "2":"Bar", 3:"Baz"} listKey="key" listValue="value" />
Seems like that should be taken care of automatically by the tag, but I was not able to get it to work without explicitly setting those two additional properties.
I have a multiselect form control (fig. 1). When I select more than 1 value, Firefox sends both values (fig. 2). But only the last value gets sent as a input value to my controller (fig. 3). How do I get all those values passed on to my controller?
<form action="html_items/search" method="post" >
<!-- Criteria -->
<div style="float:none;">
<label>Content Provider </label>
<select multiple id="content_provider" name="content_provider">
<option value="FLR">Flare</option>
<option value="SLDT">Slashdot</option>
</select>
</div>
<input type="submit" value="Search" />
</form>
fig. 1
Parametersapplication/x-www-form-urlencoded
content_provider FLR
content_provider SLDT
fig. 2
PARAMs[{"content_provider"=>"SLDT", "controller"=>"html_items", "action"=>"search"}]
...
fig. 3
Thanks
Tim
The first thing is that if you want to create an array of the elements that are selected you need to name your <select> something like <select name='foo[]'>
Next... If nothing is selected nothing will show up. This makes sense, but it stumped me for a bit. I was doing ajax where the left select was search results and the right was the completed list.
I just added a .click(function(){}); to my submit button to set every item on the left to selected with jQuery and the items showed up in the parameters as an array. In the below example you should see the first item show up.
<select multiple id="content_provider" name="content_provider">
<option value="FLR" selected>Flare</option>
<option value="SLDT">Slashdot</option>
</select>