My JSP snippet is as follows:
<form:select path="rules[${counter.index}].assignedTo.assignedToName">
<form:options items="${assignmentRulesForm.assignedToList}"
itemLabel="assignedToName"
itemValue="assignedToName"/>
</form:select>
The assignedTo property refers to this object:
public class AssignmentDTO {
private String assignedToName;
// No other members
assignedToList then is a List<AssignmentDTO>
Really, what I want to happen is for the drop-down to contain all entries in the assignedToList, but to select the value associated with rule[i].assignedto.assignedToName
Presently, what I am seeing is that it does not perform the selection part, and the first item in the drop-down is displayed.
Any help is appreciated.
Thanks
This should work for you, the path is not the name but the assignedTo:
<form:select path="rules[${counter.index}].assignedTo">
<form:options items="${assignmentRulesForm.assignedToList}"
itemLabel="assignedToName"
itemValue="assignedToName"/>
</form:select>
If you have implemented a .equals for your assignedTo, it should just work.
<html>
<head>
<script>
function show() {
var op= window.document.getElementById('select');
var selItem= op.options[op.selectedIndex].value;
if(selItem=="Others") {
document.getElementById('text').style.visibility = 'visible';
}
else {
document.getElementById('text').style.visibility = 'hidden';
}
}
</script>
</head>
<select id="select" onchange="show();">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="Others">Others</option>
</select>
<br>
<input type="text" id="text" style="visibility:hidden">
</html>
Related
how to get the name of select tag and use to if condition here is my code:
#{
var size="";
if(Request.Form["cboSize"] == "Extra Small (XS)"){
size = "Extra Small (XS)";
}
...
}
<select name="cboSize">
<option value="xs">Extra Small (XS)</option>
<option value="s">Small (S)</option>
<option value="m">Medium (M)</option>
<option value="l">Large (L)</option>
<option value="xl">Extra Large (XL)</option>
</select>
You need to wrap your select node in a form to get its value from Request.Form["cboSize"]:
<form method="POST">
<select name="cboSize">
<option value="xs">Extra Small (XS)</option>
<option value="s">Small (S)</option>
<option value="m">Medium (M)</option>
<option value="l">Large (L)</option>
<option value="xl">Extra Large (XL)</option>
</select>
<input type="submit" />
</form>
Then in your code:
public async Task<IActionResult> OnPostAsync()
{
var size = Request.Form["cboSize"];
//do something with it asyncronously
return RedirectToPage($"/Details/{size}");
}
Rather than loading a new template, is there a way to force Meteor to initiate an iteration (using {{#each}}) of an array in Meteor? For example, if the user selects a value in a pull down selector, to then initiate Meteor to iterate through an array within that template to populate another multiple selector list rather than load a whole new template with the new selector list.
Let's say this is within a template:
.
.
.
<form class="input-field col s6 card-selector">
<select multiple">
<option value="" disabled selected>Select Students</option>
{{#each StudentList1}}
<option value= '{{FullName}}'>{{formatName FullName}} ({{Level}}) {{RoomWk1}}</option>
{{/each}}
</select>
</form>
.
.
.
When a user selects a value in a different selector in that template:
<select class="week-selector">
<option value="" disabled selected>Week</option>
<option value="Week1">Week 1</option>
<option value="Week2">Week 2</option>
<option value="Week3">Week 3</option>
<option value="Week4">Week 4</option>
<option value="Week5">Week 5</option>
</select>
it will force a reiteration of the first #each to:
<form class="input-field col s6 card-selector">
<select multiple">
<option value="" disabled selected>Select Students</option>
{{#each StudentList1}}
<option value= '{{FullName}}'>{{formatName FullName}} ({{Level}}) {{RoomWk2}}</option>
{{/each}}
</select>
</form>
It would be more efficient than loading a new template that's the same except for the multi selector values.
Sessions are reactive and you can achieve this by using sessions (check if you have session package).
//we don't want the session value from the previous search/events
Template.templateName.onRendered(function(){
Session.set('sessionName', undefined);
});
//I'd probably use onDestroyed instead of onRendered
Template.templateName.onDestroyed(function(){
Session.set('sessionName', undefined);
});
//template events
'change .week-selector': function(){
var selected = $('.week-selector').find(":selected").text();
Session.set('sessionName', selected)
}
//template helper
StudentList1: function(){
var session = Session.get('sessionName');
if(session !== undefined){
//return some documents using the session value in your find()
} else {
//return documents without session value
}
}
EDIT: I found .text() of the selected option in the event but you are free to return value or do whatever you want with the found value/text.
Is there any elegant way to create something like this
<select>
<option value="" disabled selected>Select your option</option>
<option value="1">Option1</option>
</select>
using #Html.DropDownListFor helper in ASP.NET MVC 4?
http://jsfiddle.net/wLAt8/
Unfortunately not. There is no way to add attributes to a SelectListItem, which is what gets rendered as an <option>.
You would need to extend the SelectListItem class, and then extend the DropDownListFor to use it. It is unfortunately not very straightforward... It would have been nice for there to be an Attributes dictionary on SelectListItem for this purpose.
Here is an implementation of a custom attribute being applied:
Adding html class tag under <option> in Html.DropDownList
Here's one way you could do it using tag helpers.
<select asp-for="#Model.Orders.FruitsId" class="form-control">
<option value="">Select a Fruit</option>
#foreach (var Fruit in Model.Fruits )
{
if (barber.Name.Equals("Orange"))
{
<option disabled="disabled" value="#Fruit.Id">#Fruit.Name </option>
}
else
{
<option value="#Fruit.Id">#Fruit.Name </option>
}
}
</select>
After struggling I've done this via js function:
function handleSubAction(select) {
var item = document.getElementById(select);
item.children[0].disabled = true;
item.children[0].hidden= true;
return false;
}
and event handler in HTML:
<body onload="handleSubAction('subAction');"/>
I have a handlebars template that I am embedding in my html page. There is a select element with all of the available options already rendered. How can I set the selected value of the select list when I render my template?
<script id="my-template" type="text/x-handlebars-template">
<div id="my-modal">
<form action="/TestAction" method="post">
<input id="MyId" name="MyId" type="hidden" value="{{MyId}}" />
<label for="Test">Test: (optional)</label>
<select id="Test" name="Test">
<option value="">-- Choose Test --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>
</div>
</script>
If you don't want to build out the option as part of the helper, you can use a combination of a small custom handlebars helper and parent context, denoted using the ../ syntax:
First write the helper:
Handlebars.registerHelper('selected', function(option, value){
if (option === value) {
return ' selected';
} else {
return ''
}
});
And then in your template you call your helper and pass in the parent context inside the each loop to check for selectedState
{{#each states}}
<option value="{{this}}" {{selected this ../selectedState}}>{{this}}</option>
{{/each}}
I took the {{#each}} helper as inspiration, and wrote a custom helper that does the same thing: loops over a list, and continually appends the contents of the arguments to an output string. (From here: Handlebars block helpers)
In this case, I'm not passing in a chunk of template HTML to serve as the function's options parameter, like you would when using {{#each}}. Instead I am just building up the <option>
tags by brute force, and testing every iteration of the context list. Lastly, I return a big long string of <option></option> tags, and hopefully one of them has selected="selected".
The function:
Handlebars.registerHelper('options_selected', function(context, test) {
var ret = '';
for (var i = 0, len = context.length; i < len; i++) {
var option = '<option value="' + context[i]+'"';
if (test.toLowerCase() == context[i].toLowerCase()) {
option += ' selected="selected"';
}
option += '>'+ Handlebars.Utils.escapeExpression(context[i]) + '</option>';
ret += option;
}
return new Handlebars.SafeString(ret);
});
The tag in use:
<script id="form-state" type="text/x-handlebars-template">
<select name="state">
{{{options_selected states selectedState}}}
</select>
</script>
Please suggest any edits that would improve this, thanks!
You can use values straight in the Handlebars template like so.
Handlebars Template
<select id="distance">
<option value="15" {{#if (isEqual 15 distance)}} selected {{/if}}>15</option>
<option value="25" {{#if (isEqual 25 distance)}} selected {{/if}}>25</option>
<option value="50" {{#if (isEqual 50 distance)}} selected {{/if}}>50</option>
<option value="100" {{#if (isEqual 100 distance)}} selected {{/if}}>100</option>
<option value="300" {{#if (isEqual 300 distance)}} selected {{/if}}>300</option>
</select>
Handlebars Helper
define(['hbs/handlebars'], function (Handlebars) {
'use strict';
Handlebars.registerHelper('isEqual', function (expectedValue, value) {
return value === expectedValue;
});
});
Here is a solution (built over EmberJS to ease the JS part)
I refactored your sample a little, to have objects for proposed values, which can by the way carry the selected attribute...
The template part:
<script type="text/x-handlebars" data-template-name="my-template">
<div id="my-modal">
<form action="/TestAction" method="post">
<input id="MyId" name="MyId" type="hidden" value="{{MyId}}" />
<label for="Test">Test: (optional)</label>
<select id="Test" name="Test">
<option value="">-- Choose Test --</option>
{{#each values}}
<option {{bindAttr value="id" selected="selected"}}>{{label}}</option>
{{/each}}
</select>
</form>
</div>
</script>
The JS part:
App.MyView = Ember.View.extend
templateName: 'my-template'
MyId: 42
values: [{
id: 1,
label: '1'
}, {
id: 2,
label: '2'
}, {
id: 3,
label: '3',
selected: true
}, {
id: 4,
label: '4'
}]
You can try it # http://jsfiddle.net/MikeAski/uRUc3/
I had same problem.
$('select').val(value);
This is how I solved it, I set the desired value with jQuery after rendering the template. Was surprisingly easy. (Maybe its also a way to keep the templates logicless)
I am having issues with modelmap attributes.. this is my xyz.jsp file..
<select name="list">
<option value="-">Choose a Value</option>
<c:forEach items="${sectionList}" var="section">
<option value="${section.code}">${section.description}</option>
</c:forEach>
</select>
and the controller class...
#RequestMapping(value="index", method = RequestMethod.GET)
public String mainList(ModelMap modelMap){
modelMap.addAttribute("sectionList", sectionService.getAllSectionList());
return "home";
}
But on the web page I don't see the options in the drop down.. All I see is only one value saying "${section.description}".. infact this is the source in html..
<select name="division" >
<option value="-">Choose a Value</option>
<option value="${section.code}">${section.description}</option>
</select>
Any help on what am I doing wrong here? Thanks!
did you try <c:out value="${section.[attribue]}/>? otherwise it will be displayed as string.
It looks like you dont have jstl-{version}.jar in your lib folder.