Develop Reference

How to keep values of select throughout the session

I have a table and i am adding new rows dynamically. Everything is working fine except my select.
I am able to hold all the values of my field except the select field.
So it is something like this When the user fills the form and click on initiate button, he is directed to second screen which is verification screen where he can verify the details and if wants to modify anything he can click on modify button and he will be redirected to first screen.
So the problem is the values filled by the user is retained in all the field but the value of the drop-down is not retained and is showing default value 'Select'.
Also i am able to get the selected value in array from 2nd to 1st screen and also i am able to assign the value to it but still its not displaying on the screen .Here's how.
Code
document.getElementById('fldsearch'+temp).options[document.getElementById('fldsearch'+temp).selectedIndex].value = arrsearch[temp];
arrsearch[temp] is an array where the selected value is stored.
fldsearch is the <td id> of select field.
temp is the increasing number of <td id> since i am adding rows dynamically.
Please do let me know if you need anything else.Thanks

First you have to set all values to drop-down. If all values are bind to select then one of them can be set to default value. Take a look at below example. Also please find fiddle link in comments.
<select name="ddlTitles" id="ddlTitles">
<option value="">Select</option>
</select>
$(function() {
var titles = ["Mr.","Ms.","Mrs.","Miss."];
for(var i=0;i<titles.length;i++){
var titleElement = document.getElementById("ddlTitles");
var option = document.createElement("option");
option.text = titles[i]
option.value = titles[i]
titleElement.add(option);
}
//Set default value to Ms.
$("#ddlTitles").val("Ms.");
});

How to separate by pipe for multiple select in hidden field

I have a form that has 3 drop downs to make selections, the first drop down allows the user to select a specific Type, the second box, the user must select a date which will then present users with the filtered options on the 3rd drop down which is done in Jquery. I had it working where the user only selects one option in the 3rd drop down.
Now I would like the user to select multiple options. The code below is what I used to get the single selection to update the hidden field and pass via form submission.
The below code minus the ".join('|')" outputs the values into the hidden field then it gets passed into a data storage via POST.
This is my code:
$('#TopicID').on('change',function()
{ TIDval.val( $(this).find(':selected').text().join('|') );
});
I tried several versions to get it to work if I remove the ".join('|')" the output gives me all of the values concatenated.
Value 1: tree
Value 2: boat
Value 3: car
The output is as follows: treeboatcar
but I need: tree|boat|car
I have updated my new code to reflect the solution suggested by Loading... in this thread to the following.
$('#TopicID').change(function(){
var selectedText = $(this).find(':selected').map(function(){
return $(this).text(); //$(this).val()
}).get().join('|');
$("#TopicID_value").text(selectedText);
});
Which now updates the hidden field value correctly with the pipe separated values but the value is no longer passed in the POST call when submitted in the form.
The hidden field
In firebug I see the value being updated properly when I select one or multiple options but for some reason the value gets lost in the submission process. I don't see much of a different where that could happen.

Use map()
$('#TopicID').change(function(){
var selectedText = $(this).find(':selected').map(function(){
return $(this).text(); //$(this).val()
}).get().join('|');
console.log(selectedText);
});
$('#TopicID').change(function(){
var selectedText = $(this).find(':selected').map(function(){
return $(this).text(); //$(this).val()
}).get().join('|');
console.log(selectedText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="TopicID" multiple="true">
<option id="1">ABC</option>
<option id="2">XYZ</option>
<option id="3">PQR</option>
</select>

Save select values in an array and go through it

I have 6 select fields to select three different options ("Please Select..", "Yes" and "No"). I want to be able to know which values has been selected inside a group, each group of select is inside a div. I try using this:
$('#qqq').find('select').change(function () {
// alert($(this).val());
var option = $(this).val();
selectValues.push($(this).val());
But this only works when you change the value, and don´t storage the values, therefore if you go through the group in other order the results are different. For example if you start in the last select and then go in inverse order. Pushing the values into a variable, the values are saved but if you change twice is saved it twice in "selectValues"
My html is something like this:
<div class="mygroup">
<select id="aa">
<select id="bb">
<select id="cc">
</div>
The values of the select are generated in jQuery, therefore the values can be retrieve using --> this.val()
My question is how can I retrieve the values of a group and then go through it? I had though in save it in an array and then go through it, but I don't know if the array values are going to change when you change the select twice.
I want to know it, because if any of the select is "Yes", some below input fields should be required and if all of them are "No", those fields should be readonly.

Like this:
var curVals = {};
$('#qqq').find('select').each(function () {
curVals[$(this).prop('id')] = $(this).val();
});
or this:
var $selectedYes = $('#qqq').find('select').filter(function () {
return $(this).val().toLowerCase() === 'yes';
});
If any have 'Yes' then $selectedYes will be a jQuery object containing only those select element(s); if none are, it will be an empty jQuery object.

Dynamically add option to chosen select multiple JQuery plugin

I want to add the text that a user inputs in the text field of a chosen select multiple input as an option, and automatically select it, all of this when the option doesn't exists, if the option exists, then I would like to select it. So far I have manage to do this:
Chosen.prototype.add_text_as_option = function () {
$('#id_select').append(
$('<option>')
.html(this.search_field.val())
.attr('selected', 'selected')
.attr('value', 0)
);
$('#id_select').trigger("liszt:updated");
return false;
};
I call this function whenever the users presses enter while the input field is in focus within the keydown_check function.
I have two problems:
Top priority, when the user presses enter and has typed a substring of an option, the option won't get selected, but the substring text will be added and selected. Not what I want.
For instance: If I have the option "foo", and start typing "fo", chosen will mark the first
option as candidate ("foo"), so if I press enter, it should be selected, but instead, what happens is that "fo" is added as an option and selected, when I actually wanted to select "foo".
If I select "foo" with a click, then everything works fine. The option chosen marks is selected and the substring text is taken as part of the option.
How can I add a non existent option to chosen, without loosing all the original functionality?
How can I access the select multiple field I initilized whith chosen inside the chosen plugin? As you can see in the code above, the id of the select multiple field is hardcoded. I want to do this to be able to refresh the select when the user adds a new option.
The functionality that I'm looking for is very similar to the skills widget of linkedin

You should try out the select2 plugin which is based off of chosen plugin but it works well with adding elements dynamically.
Heres the link: http://ivaynberg.github.com/select2/
Look at the example for auto-tokenization I think that might be what you are looking for.

I needed this today so I wrote something like this:
$(function() {
// form id
$('#newtag').alajax({
// data contains json_encoded array, sent from server
success: function(data) {
// this is missing in alajax plugin
data = jQuery.parseJSON(data);
// create new option for original select
var opt = document.createElement("OPTION");
opt.value = data.id;
opt.text = data.name;
opt.selected = true;
// check if the same value already exists
var el = $('#tags option[value="' + opt.value + '"]');
if( !el.size() ) {
// no? append it and update chosen-select field
$('#tags').append( opt ).trigger("chosen:updated");
} else {
// it does? check if it's already selected
if(!el[0].selected) {
// adding already existent element in selection
el[0].selected = true;
$('#tags').trigger("chosen:updated");
} else {
alert("Already selected and added.");
}
}
}
})
});
"#"newtag is a form, ".alajax" is a plugin that sends form data in async way and returns server's response in JSON format. In the controller I check if a tag exists otherwise I create it. In response I five "jsoned" tag object.

I created a jsfiddle of jquery chosen which takes text and create as option. In earlier version of jquery chosen have facility create option.
create_option: true;
persistent_create_option: true;
skip_no_results: true;
You can use this code:
$('#id_select').chosen({
width: '100%',
create_option: true,
persistent_create_option: true,
skip_no_results: true
});
jsfiddle link: https://jsfiddle.net/n4nrqtek/

just call it keyup_check
keydown_check is called before the pressed letter is initialized
unlike keyup_check

I found a solution multiple select
var str_array = ['css','html'];
$("#id_select").val(str_array).trigger("chosen:updated");

Dynamically generate the content of Drop Down list via jQuery

I am new to Javascript, JSON and jQuery. So please be easy on me. I have a JSP page that contain a drop down list. The contents of the drop down list are populated when the page is loaded. I wrote a Servlet that return the contain of the drop down list in the form of Map, and convert it to JSON string and sent back to the jsp via response.getWriter().write(json); However I am having trouble to getting the result back from the jsp side, and populate the contain of the drop down list from the result. Here are my codes
customer.jsp
$(document).ready(function() {
getCustomerOption('customer'); //try to pre-populate the customer drop down list
});
function getCustomerOption(ddId) {
var dd = $('#' + ddId);
$.getJSON("http://localhost:8080/WebApps/DDListJASON", function(opts) {
$('>option', dd).remove(); // Remove all the previous option of the drop down
if (opts) {
$.each(opts, function(key, value) {
dd.append($('<option/>').val(key).text(value));
}
}
});
}
down where the drop down list is generated
<select id="customer" name="customer">
<option></option>
</select>
The result is nothing get populated into the list. So sad

I think you are invoking the wrong function in document ready
Shouldn't it be
getInitialOption('customer');
instead of
getCustomerOption('customer');

You may add additional <option> elements to a <select> with the code:
$("#selectID").append("<option>" + text + "</option>");
see: JQuery Docs

I don't understand $(''), but I'm not sure that's the problem either, hard to tell exactly.
I do know it will be quicker if you do create the list of options in-memory and then do one append with .html(options) rather than append them one at a time. That may make it easier to understand also, to build the html up one line at a time and then append it.