Develop Reference

Dynamically changing text field value using JSTL

I'm a beginner at JSTL as I've only started using it recently to avoid using scriplets in my JSP, and I wanted to ask for help about something I've been stuck in.
I have a select element which I've managed to populate with an arraylist using JSTL. However I also need to dynamically change the value of a readonly text field whenever a different option in the dropdown list is selected, and the value to put in the text field is at the same index in the arraylist as the selected option, and that's where I'm having trouble with.
<select id="department" onchange="managerfill()">
<c:forEach var="dept" items="${departments}">
<option value="${dept.deptname}"><c:out value="${dept.deptname}"/></option>
</c:forEach>
</select>
<input type="text" id="manager" readonly>
I tried to use a js function to change the text field's value but so far, I've had no luck with getting it to work.
function managerfill() {
var x = document.getElementById("department").selectedIndex;
document.getElementById("manager").value="${departments[x].manager}";
}
It would have been easier if both department and manager fields were both dropdown lists, but we were required to make manager a text field so I'm kind of at a loss trying to work around it.

You can't use jstl language on rendered pages.
jstl is server side only and can't be used on end-user browser.
You need to use js to change it.
The function you have wrote is good expect the jstl syntax that cannot be no more interpreted.
function managerfill() {
var select = document.getElementById("department");
var x = select.selectedIndex;
document.getElementById("manager").value = select.options[x].text;
}
Something like this should work.
But I think that the text you want to print is server side, so you can print it in some html/tag or hidden select and take the result from it.
replacing the select.options[x].text:
<select id="departments-manager" class="hidden">
<c:forEach var="dept" items="${departments}">
<option value="${dept.manager}"><c:out value="${dept.manager}"/></option>
</c:forEach>
</select>
function managerfill() {
var select = document.getElementById("department");
var selectManager = document.getElementById("departments-manager");
var x = select.selectedIndex;
document.getElementById("manager").value = selectManager.options[x].text;
}

jQuery Autopopulate Multiple Select uses text instead of value

I've got a multiple select like this configured to auto-populate:
<select id="multiple-select-box" class="selectivity-input" data-placeholder="Type to search condos" multiple>
<option id="Alabama Grove Terrace" value="Alabama Grove" >Alabama Grove Terrace</option>
<option id="Alden Pines" value="Alden Pines" >Alden</option>
</select>
Upon select I realized the script is submitting the visible Text for each option instead of the value="" for each option chosen.
I tried to change var t=$(this).text(); to var t=$(this).value(); thinking that would grab the value instead of the option text but had the same results. What am I missing?
<script>
$(document).ready(function() {
$("#bySub").submit(function(){
$(".selectivity-multiple-selected-item").each(function(){
var t=$(this).text();
//if()
$(".ml").append("<option selected='selected'>"+t+"</option>");
});
})
$('#multiple-select-box').selectivity();
});
</script>

Ok, so I went to check this selectivity plugin you're using and it converts your select into a series of divs as
<div class="selectivity-results-container">
<div class="selectivity-result-item highlight" data-item-id="Alabama Grove">Alabama Grove Terrace</div>
<div class="selectivity-result-item" data-item-id="Alden Pines">Alden</div>
</div>
you have to change your submit function to get the data-item-id property which corresponds to your original select value like
$("#bySub").submit(function(){
$(".selectivity-multiple-selected-item").each(function(){
var t=$(this).data("item-id");
$(".ml").append("<option selected='selected'>"+t+"</option>");
});
edit
fiddle example

In this line, you are appending options to the select, but you have set no value attribute:
$(".ml").append("<option selected='selected'>"+t+"</option>");

As stated in the comments, the "fetch value" method of a form element in jQuery is:
$(this).val()
You might be confusing it with the JavaScript property:
this.value
...which also works. Both return an array of strings if something is selected and set to "multiple"
To follow up on your comment, I don't see your markup for the selected element with class="ml" thus it's almost impossible to debug why your form isn't submitting the values without seeing the bigger picture (i.e. it may be outside the form element). You could try adding the value property to the select element however jQuery should be able to pick up selected options missing the value property by using the text value instead.

Angular, show selected option in textbox

I have a multiple columns table and showing their values in multiple controls by Angular JS. For example I am using Select/Option (multiple) to show column A, and I want to use another text box to show column B, based on select/option. Here is code:
Column A in Select (multiple):
<select multiple data-ng-model="selectedEmp" data-ng-options="o.emp for o in post.Emps" >
<option value="SampleValue">Samplevalue</option>
</select>
Column B in text box:
<input data-ng-model="selectedEmp.gender" type="text" style="width:60px;"> </input>
The thing is, when I am not using 'Multiple' in select control, the gender value (in same record) can be displayed in text box, but when using 'multiple', the text box is not showing selected current record.
Please help on how to implement this.
Thanks

When you are using select without using multiple, you are binding to a object. So your selectedEmp might be something like {"emp":1,"gender":"M"} (an object).
But when you use multiple select, you are binding to an array. So your selectedEmp might be something like :
[{"emp":1,"gender":"M"},{"emp":2,"gender":"F"}]. Notice the [].
So, in case of multiple, you also need to pass the index whose value you want to bind. But in this case, it seems like you want to have input's for multiple selected items from above select.
I would use something like this:
<input data-ng-model="s.gender" type="text" ng-repeat="s in selectedEmp" />

Unable to select first element from select using Jquery

I am filling a drop down based on the value selected in the first drop down.Data being sent back from server is in JSON format and using JQuery to parse and fill the second select tag
<select name="abc" id="jobName">
<option value="-1">Please select a Job</option>
</select>
This is my Jquery code
var selectedGroup = document.getElementById(groupDropDownId);
var groupdata = selectedGroup.options[selectedGroup.selectedIndex].value;
var formInput='group='+groupdata;
$.getJSON('search/getSchedulerJobListForGroup',formInput,function(data) {
$('.result').html('' + data.jobList + '');
$.each(data.jobList,function(index, value){
var jobId = document.getElementById(resetDropDownId);
var option=new Option(value,value);
try{
jobId.add(option);
}
catch(e){
jobId.appendChild(option);
}
});
});
$("#jobName")[0].selectedIndex = 1;
// $("#jobName").val($("#triggerjobName option:first").val());
in above code groupDropDownId is ID of the drop down based on whose value, second drop down will be filled.resetDropDownId is ID of second drop down which i am trying to fill from JSON data getting from the server.
Upon filling the drop down, its also creating an empty option tag and it is getting select by default.
I am not sure if i can add some default value to that empty option so that i can select that default option value like "please select bla bla."
also i tried to select first element from the drop down but nothing seems working for me.I am wondering what i am doing wrong here?

Based on your question, it looks like you want to know how to change the value and text of an element within a dynamically populated select list.
Currently, you have this statement $("#jobName")[0].selectedIndex = 1; sitting outside of your getJSON request. If you move this inside of the getJSON function, it will work as expected.
If you want to set the value and text of that object, you'll want to use ->
$('#jobId option:first').val("Some Value").text("other stuff");
You can see a working JS Fiddle using dynamically populated select list from a JSON object.
Fiddle

Dojo dijit.form.select: selected value of old widget cannot be changed after I create a new select widget

I'm creating new select boxes from a javascript function, on a div click event.
when the user clicks a div, a new select box is created elsewhere on the page (along with other stuff).
Specifically, on a div click, I create a string (in a javascript function) of the form:
<select id="derp"+divName dojoType="dijit.form.Select" onChange="dosomething()">
<option value="foo">foo</option>
<option value="bar">bar</option>
...
</select>
Then I call a function to widgetize the above select:
function makeDojoWidget(digitID){
var widget = new dijit.form.Select({},digitID); //options,elementID
}
It creates the widget just fine. When the user clicks another div, it creates another select box. However only the new select is editable. i.e. I can't change the selected value of the other select boxes.
It works fine when I don't try to render it as a dijit, so it seems to be a dojo problem (i.e. if I create a regular select, I can change the selected value of all selects when I make a new select).
I'm stumped... any suggestions??

Try to force it to be enabled.
In some words in your function
function makeDojoWidget(digitID){
var widget = new dijit.form.Select({},digitID); //options,elementID
}
Set readOnly to false.
function makeDojoWidget(digitID){
var widget = new dijit.form.Select({readOnly:false},digitID); //options,elementID
}