Develop Reference

How to get selected values of all dynamically created multiple dropdowns using jquery

I have created dynamically row with drop-down list, i want to get all selected values from dropdowns of rows with JQuery. Please help me.

Since you haven't posed any code snippet, I'm just gonna wing it, assuming it's a standard <select>-box.
// Loop all parents and grab the value which is set by the browser whenever update occurs.
var values = [...document.querySelectorAll('select')].map(x =>x.value)

Add items to dropdownlist with javascript and persist in postback

I'm pretty new to web development, and I've encountered the following problem I don't really understand. Working in VS2010 with visual basic.
I have a page (aspx), which has a gridview, and this has a few columns, including a column with tickboxes and a column 'action', which has an empty, hidden dropdownlist to begin with (every row has this).
Whenever a user ticks a box, I retrieve some values from the server with an AJAX-call (which is my first attempt at AJAX :-)) and with those values I populate a dropdownlist in the 'action' colum of the selected row. So far so good.
The user can then make a selection on the dropdownlist, en then he presses a button (upload), and a postback is done to process the information.
However, in the code behind, I can't retrieve the added items in the dropdownlist (let alone the selected value). I CAN retrieve the dropdownlist, but it has no items.
After googling for some time I realised that client-side changes are not persisted when the form is posted to the server, which I understand- but it also seems odd. The dropdown is created when the page is created, so why doesn't it store the javascipt-added items? Especially since a few work-arounds I found use a hiddenfield to store the added items or selectedvalue. If I can store them in a hiddenfield, why can't I store them in the actual dropdownlist?
I'm obviously not understanding how websites work... But this means that, after a page is initially loaded, you can change values in dropdowns and listboxes and such, but these will never be available serverside?
Edit: some code; the first a javascript-snippet how I add the different values I retrieved through the AJAX call:
var drop = row.findElement("ddlAction"); //find the dropdownelement in the DOM
for (j = 0; j < dropdownitems.length; j++) { //add all the options from xml
option = document.createElement("option");
option.text = dropdownitems[i].getAttribute("text");
option.value = dropdownitems[i].getAttribute("value");
drop.add(option, null);
}
This works fine, the dropdownlist is filled and I can select. But when the page gets posted I do the following in the server code:
Dim SelCount As Integer = LocalFilesGrid.SelectedItems.Count
If SelCount >= 0 Then
For Each dataItem In LocalFilesGrid.SelectedItems
Dim drop As DropDownList
drop = dataItem.FindControl("ddlAction")
If drop.Items.Count = 0 Then 'always zero
MsgBox("Nope")
End If
Next
End If
I'd like to be able to loop through the selected rows of the grid, get the corresponding dropdownlist and selectedvalue.

When you mix such different technologies you will end up in troubles like this. What you are trying to do is bit of Ajax and a bit of ASP.NET. Choose one and then use it. If you choose ASP.NET instead of AJAX call use UpdatePanel which will simplify your life.
If you want to Ajax stuff your self, then handle the button click and submit the request by ajax rather than postback.
The reason why you are able to retrieve the drop down but not the items because you must have declared the drop down in aspx but the items were added on client side, so server has no knowledge about the items.
The reason is ASP.NET uses view state and you can not mess with view state. So you can add the data to hidden field and read them at server but you can not write the data in view state.
The best way is use ASP.NET with UpdatePanels. If you mix, then you will have to keep doing some sort of trick at every step. If you want to do your own Ajax stuff better use MVC and Razor(not mvc with aspx) because it is made for such use.

add new option to select drop down list using jsp

can anyone please suggest , how to add new option to drop down list (using select tag in html) so that user can enter the new value and on submit it should be appended to the existing list ..i am able to populate it's option list via DB dynamically and it's working properly
i am having 5 drop down mutually exclusive category lists in a single table row and i am providing them some initial options.Now i want that if the list contains user's required option then user can select from existing one ...else it should be able to add a new entry to that list & it should be simultaneously updated in DB on submit.

Follow this steps
As you are populating the drop down from databse . So its better to add the value in database only.
I think your user will be entering the value in a text box. So on submit call a method or servlet which can be used to add the value in the database field from which you are populating the drop down.
After updation make your servlet to return on the same page.
Now you can see your new option in the drop down.
Update on further problem explaination
For your problem do one thing
Give a text box in last option of each dropdown.
Select an event in which after the new value entered by user in that text box an java script function can be triggered line onmouseout.
In that function call get the text value .
Now call your servlet or method or whatever you are using to update the db with value value in the column corresponding to that drop down using Ajax or normally.
Refresh the page.

hiii,
finally it's done.
i used following function as-
function abc()
{
var myoption = document.createElement("option"); //works with both mozilla and IE
myoption.text ="mytext";
myoption.id="mytext";
myoption.name="mytext";
myoption.value ="mytext"; //Probably, the sID stuff
document.getElementById("drop_1").options.add(myoption);
}
& so on within loop.
thanks to all .

How to preserve selected value in drop-down list after postback?

$("#county_id").change(function() {
$("#vice_county_id").html("<option value=\"\">-- Select One --</option>");
var co_id = $(this).val();
if(co_id != 0) {
$.getJSON('./php/includes/vice_county_web_service.php?co_id=' + co_id,function(data) {
$.each(data, function() {
$("#vice_county_id").append($("<option></option>").val(this['vice_county_id']).html(this['vice_county_name']));
});
});
}
});
Hi Guys,
I have the above code for loading options in one drop down based on the selection in another. It works fine but to finish this up I am trying to get it to be sticky. I.e. if the form is posted and county has a value already selected then the vice county pre loads with the relevant options. Basically fire the .change functionality on load. I have tried the .load and triggerhandler functionality but it does not seem to work. Any Ideas?? Thanks.

As far as I am aware, in order to prepopulate a form, you'll need to use server-side code. You say that the user posts his code somewhere, but you don't say how the form post is being handled.
I use ASP.net where I work, so I would have a server-side property for the value of each drop-down list. Then, when the page renders, I print the value of the property to my JavaScript code. You'll need to make your JavaScript code add the attribute selected='selected' to the option that you want to be selected when the page loads.
Update:
It sounds like you're saying that you select drop-down 1, and then the options for drop-down 2 are automatically populated. It sounds like the problem is that drop-down 2 cannot be preserved after the postback because its options are populated after the page loads (via AJAX). I believe that the solution to your problem is going to be to set the selected attribute inside code that runs when you successfully get the drop-down options via AJAX.
$.each(data, function() {
$("#vice_county_id").append($("<option></option>").val(this['vice_county_id']).html(this['vice_county_name']));
//Check if the option being added was previously selected.
});

Use the Cookies to store the value of the drop down change event.
and when the form loads use the same cookie to retrieve the value and display the user what ever he selected.
But maintaining cookie for this task is not recommeneded.
You can use the JSTL if its a JSP page.
Cookie creating guidlines
http://www.quirksmode.org/js/cookies.html

Binding dynamic select list with asp.net MVC

I have a ViewModel of a form (Name, Address) etc and it's all bound to controls on my page (using Spark engine) - e.g.
!{ Html.DropDownList() }
That works fine. However, there is one DropDownList which is bound that has no values in it to begin with, the values are populated using Ajax (by selecting previous drop downs)
The problem lies when I submit the page and there's a validation error. The page loads and my select list has no values in it (as it hasn't been triggered to get them).
How can I set it up so that the ViewModel knows about values got dynamically so that it can populate the select list on page load?

You'll either need to:
Do this server side by using the Html.DropDownList() call that allows you to pass values in:
Html.DropDownList(string name, IEnumerable<SelectListItem> selectList, string optionLabel, object htmlAttributes)
Or the other way would be to just trigger the same ajax call when the page loads so you don't have duplicated logic.
I'd actually recommend the second way, as it'll keep you from doing the same thing multiple ways, but it does mean that there'

You can add a property of selectlist type in your viewmodel, populate it in constructor, and call it through Html.DropDownList function in your view page. Further since this selectlist is dependent on another list(i.e another property of you viewmodel). in your constructor you can write code like,
say if first listbox is connected to list1 property of type int and allowed values are >0
<code>
if (list1!=0)
{
write code to populate second list based on your first list parameter and also set
the selected value as if selected by the user at submit its stored in the other
property linked to the second list box.
}
</code>
if you are still not clear, write here the concerned code of your viewmodel, and server side database call of your second list, I may help you by editing your code.