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.");
});
Related
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>
I have an ordinary select list (single not multiple). The list is headed by a title such as "Events" :
<option selected = "selected" value = " " class = "hselect" > Events </option>
Under the title are the actual choices. The user has a form to fill in, and the Events select box will appear in the form. Once the user has chosen his event, such as "register", the choice appears in an input box next to the dropdown. I use a Javascript program to do that.
The selection also remains in the select box itself, so that the form shows
|register| |register| -- the first in the select box, the second in the input box. What I need, instead, is for the select box to return itself to the heading, so that the form shows |Events| |register|.
Using the same Javascript program I can pick up the "Events" option, but I don't know how to get the select box to go back to its original configuration with Events showing at the top, and the choices underneath.
Is there a way to do this in Javascript?
To select the first option from a <select> use the "selectedIndex" property:
var target = document.getElementById('target');
target.onchange=function(){
alert('select changed!');
target.selectedIndex = 0;
};
fiddle: https://jsfiddle.net/adriel_santos/n90s0mzm/
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.
The select values are confusing me. When the user edits a row in my app I clone a tag with jquery (called empty-X) and put it on a modal window so that the user can edit the values. At the same time I get a json object (data) from server and fill in the current fields on the modal window as it stands in the database :
empty_X.find('#id_deals-1-currency').val(data[0].fields['currency']);
Now when the modal shows, the user can see how the correct currency is selected in the dropdown.
Yet when I check the HTML for this element with Firebug, I get a different picture, nothing seems selected.
<select id="id_deals-1-currency" name="deals-1-currency">
<option selected="selected" value="">---------</option>
<option value="1">USD - $</option>
<option value="2">EUR - €</option>
<option value="3">GBP - £</option>
</select>
And yet when I send the form to the server, there are no validation errors and the currency is the same value as it was previously set through val(). Life is good.
While this works by itself, there is a problem. What if the user wants to get back to the edit mode and verify the currency once more before saving it?
In this case I can't load the values from the database any more. His previous local changes matter now. I have to clone the current record with currency inside back in the modal window, so the user can see what he had changed previously and verify it. The problem is now the user doesn't see the currency he had changed in the previous step. In fact he would see an empty dropdown instead.
What are my options here? Is there a way to set the selected flag to the actual selection rather than using val()?
When cloning a <select>, the option with the 'selected' attribute becomes the current option in the cloned object - instead of the actual current object (as per value attribute).
To counter this, you can find the currently selected option from the value returned by val() and then apply the selected attribute to it prior to cloning it. This way you wont need to set the value after cloning.
Demo: http://jsfiddle.net/DqADq/
Code: (.x1 is the <select>)
// simple cloning
$('.x1:first').clone().appendTo('.out');
// setting selected attr before cloning
var v = $('.x1:first').val();
$('.x1:first option').removeAttr('selected'); // remove 'selected' from all options
$('.x1:first option').each(function() {
if($(this).attr('value') == v) {
$(this).attr('selected', true); // apply 'selected' to current option
}
});
$('.x1:first').clone().appendTo('.out');
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