Populate Kendo DropDownList with array from selected value - javascript

Using javascript I want to populate a dropdownlist (DDL2) with certain data from a REST JSON endpoint based on the selected value of the DDL2.
This DDL2 selected value is triggered by previous DDL1 selection (I have that part working). For example if DDL1 selected value is "Town" then the selected value for DDL2 is: "SELECT towninfo FROM towns ORDER BY towninfo". It's a SQL query, currently. I have the option of replacing it with a comma-delimited array of towns (RALEIGH,CHARLOTTE,ASHEVILLE...), or I could replace it with a JSON string. I'm open for suggestions on that part.
What I want to do is populate DDL2 with the selected array. So when I select "Towns" in DDL1 then DDL2 populates with a list of towns. Thanks!

If you mean something simple as populating a second drop down based on the first one's selection, here is a quick and dirty sample...
http://jsbin.com/AHOpAJA/1/edit
If you want something a bit more complicated, here is another one using three dropdowns, that all bind from a service. http://jsbin.com/ihodoc/3/edit

Related

How to filter data for dropdown options based on previous selected?

I will try to explain shortly. I have this:
I am using AntDesign library with React, and these are not regular inputs, but Autocomplete dropdowns, when i focus on one of them it gives me a list of options to choose. So first i have to choose first dropdown value and after that i will get options in next one to choose, then i choose second and after that i get options for third and so on. So it is something like a chain, you must select all previous dropdowns to be able to get options and select current.
This is what i get from backend.
The normal thing would be that i get values for first dropdown and after i select value i call endpoint again which will return options for second one and so on. But no, i get all possible combination of values in one array, and now i have to filter that one big array each time i select value in one of the dropdowns, to get values for next one, so for the SCOPE for instance, i have to filter array depending on 3 selected previous values and so on for the others.
Last two fields are not important for this problem.
So, i need help how to filter these values in the easiest way. And to use Form.Item and Autocomplete from AntDesign.

JQuery returning select dropdown list returning value instead of text

Concatenating the selected options of three dropdown lists using JQuery to then use as a lookup value in a JSON file.
It is concatenating, but it looks like it's returning the values rather than the text of the selected option?
I know that $("#yourdropdownid option:selected").text(); is an option, however the lists are produced by reading a JSON and then placing the outcome in an <Option value= > - will this still work?
FIDDLE
Any suggestions?
$('#bcr').val() will get the value or ID of the dropdown.
You can use $('#bcr option:selected').text() to get the value inside the dropdown ie the text

Populating listbox with a function that gets values from a table

I have 2 listboxes on my web page. I want to populate second listbox by a value selected in first list box. When I select an option in firstlistbox it queries a table on my backend and populates the secondlist box based on the results. I cannot use php script inside a javasript so what should I do?
You are asking how create a sub categories list box. You need create it easily using AJAX.
Here are the steps you need to do.
Populate first list box and call function loadData() when you change item.
send ajax request to getdata.php with selected category_Id parameter
Make getdata.php to output second list box according to category_Id
Display ajax response on page as html
I found this article for you.
Hope it helps.

PHP and Javascript - On select change fill in 2 further selects

I have a SQL datatable with 4 fields of info for a list of "Hazards":
ID
HazardName
DefaultInjury
DefaultSeverity
I have a form with 3 dropdowns (selections). The 1st 1 is filled in via AJAX with the ID and HazardName. The other 2 selections are filled with values and labels from other data tables.
What I want to do.. is when I select a hazard (on change) I want to set the 2nd selction with the DefaultInjury value and the 3rd selection with the DefaultSeverity value.
Is there an easy way to do this, such as having hidden extra values in the selections?
What I'm trying to avoid is having to use AJAX again to retrieve the values from the database again.
Thank you in advance for any help.

AngularJS: Select options from list, NOT object or arry

Trying to create a set of select options from a simple list, instead of an array or an object that would have keys. All the docs & examples I find are pertaining to keyed data types.
$scope.numbers = ['tweedle', 'beetle', 'battle'];
Using the code below, the select list renders fine on load.
<select ng-model="fox" ng-options="item for item in fox"></select>
After you make a selection, it splits the selection value into a comma separated list. Try selecting and item, then selecting a different item.
I'm sure it has something to do with the binding, but I can't put my finger on it:
http://jsfiddle.net/LR6DL/1/
It's because you're setting the ng-model of the select to fox. fox is also what your options are set to, so your options array is being over written with the selected value (string) - which then gets split to letters to satisfy the ng-options directive.
Short solution:
Change your ng-model to selection and your input to selection as well.
Demo: http://jsfiddle.net/LR6DL/2/

Categories