I have 2 select items.
In the first one I'm loading the options from a MySQL database table using PHP.
The second one I want to load the fields from another table where for example category field equals the value of the item selected on the first tag.
I have no idea about how I can make the second select tag load the options dynamically. I know I need to use Ajax I guess.
I've found this, but it doesn't help too much since the options of the first select tag depend on what it can find in the database.
// Given the options in the first dropdown are: "foo", "bar", and "baz"
var secondData = {
foo: ['lorem', 'ipsum'],
bar: [1,2,3],
baz: []
}
Then I need to add a 'change' event to the first dropdown, and given the value of that dropdown, load the contents of the second dropdown with the values contained in the secondData object, but I can't apply this.
If you want to get the values for the second dropdown from a database, then you do need ajax.
See this post:
Populate dropdown 2 based on selection in dropdown 1
A couple of other good posts re the basics of AJAX:
A simple example
More complicated example
Related
My requirement is to display CSV headers as the first element, then for each header, I want to map the element to elements appearing in drop-down. When first drop-down element is selected, it should dynamically populate second drop-down.
Example say my csv has the headers: first, second, third my first drop-down has values: 1, 2, 3 Then Based on 1: I should get second drop-down as a, b Then Based on 2: i should get second drop-down as i, j Then Based on 3: I should get second drop-down as p, q
i.e. First: (drop-down if 1 selected) (drop-down a, b) appears.
My problem is I am getting this done when I do not run this on loop. When I give a for loop for populating the csv header, automatically, the send drop-down does not appear.
Any help would be appreciated!
I want to show values in a dropdown box (either from an array or database - please advise on which option is method)
Then
when a user selects a value in dropdown box, i want to have and get its associated index value (like 1, 2).
For example: dropdown box shows values:
"Car"
"Bicycle"
If user selects "Car", when i get dropdown selected value, i should get 1, similarly for "Bicycle" i get 2 .. and so on.
Please advise easy and simplest method to implement this
Thanks
You can use two methods:
1) Set up prior to display a code that holds associative array with key -> value i.e: 1 => Car (you can keep it in config file if it doesn't change frequently, you can pull it from database or you can keep it in some other form: serialized, file etc.) and use it when the submitted form is being processed.
2) Use array with key and value with the same string i.e: Car => Car and when the form is processed you will have value right away. This solution has some limitations and be troublesome with using more words or other characters that need to be sanitized.
I would advise option 1, you will have to set up the list before and use it after form has been processed but it allows more freedom and its less maintenance.
I need to create 4 dropdown list where the options are the names of the candidates (ex. 5 candidates) in a certain position (ex.Representatives). When i select a candidate from the list in the first dropdown, there will be 4 options in the second dropdown, and in the third dropdown there will be 3 options and so on. To sum it up, what is the php code for removing the list in the next dropdown upon selection without submitting it yet.
Use jQuery......jQuery help you to do validations easily. So it may take less time for client side validation
For e.g.;
$("#id_of_dropdown").change(function () {
// Some Code Here like you want to change another dropdown put if else here
});
labelEx($model,’categoryid’); ?> dropDownList($model,’categoryid’,CHtml::listData($dataReader, ‘categoryid’, ‘categorydescription’),array(‘prompt’=>’SELECT’));?> error($model,’categoryid’); ?>
I want to create a sub form depends on the categoryid value.
I have itemcatproperty table, it contain categoryid, label, controltype. If the control value is 0 means its a text box and 1 for dropdown list,2 for checkbox. If I select one categoryid from the dropdown list I want to include these controls and label names into the form.
There are two approaches:
Include the different form fields in the view file, and use javascript for hiding/showing the proper fields (or field groups) on the dropdown's onChange.
Use AJAX to load the subform on the dropdown's onChange.
Maybe make your problem a bit more concrete so we can suggest the most appropiate solution?
I have 6 select boxes (sbs), 3 to a row so two rows. The top three sbs contain a list of options that gets populated via php, data is pulled back from mysql. When an option from each box is selected I'm using jquery (via ajax) to pull back option items for the sb immediately below it and populate said sb with corresponding data. I click 'create' and the data is sent via ajax to a php script which then stores the data in a table and returns the submited dropdown data (albeit formatted) in a table below the form. So you might have something that looks like this after creating a 'combination'. Eveyrthying to the left of the colon was an option on the top row of select boxes and then you have selected options from the corresponding box below displayed to the right.
Color: Red | Capacity : 4GB | Model : ABC | EDIT
Color: Blue | Speed: 2GHZ | Capacity : 2GB | EDIT
etc.
If I want to edit the record I click edit and jquery finds the id of the edit button clicked, passes it via ajax to another php script which then returns a json object with the relevant data and this is then used to repopulate the dropdown boxes with the selected options. Everything so far works fine.
My problem is this, only the top row of sbs get one of the options selected when edit is clicked. The child options don't get selected and I can't figure out why. I can get the right options to display but can't set the selected state for whatever matching value is returned in my json object. I've been 8 hours trying to figure it out and tried various things on SOverflow and other sites, none of worked - i'm not that experienced with javascript/ajax to be honest.
Upon a successful ajax process i.e success: I am doing the following:
var jObj = $.parseJSON(html);
//parentVariations# is the select boxes in the top row where
//Color, capacity, model options are displayed.
//The trigger fires off my ajax function which is responsible for
//populating the corresponding child select box with relevant data.
$('#parentVariations1').val(jObj.groupAttr1).trigger('change');
$('#parentVariations2').val(jObj.groupAttr2).trigger('change');
$('#parentVariations3').val(jObj.groupAttr3).trigger('change');
//childVariations# is the child option box, i have the same code for each child
//box but am only showing the first one here for simplicitys sake.
//What I thought I was doing here is getting each option then if the value
//matches that held in my corresponding json object set that option to selected...
//Doesn't work :'(
$("#childVariations1 option").each(function()
{
if($(this).val() == jObj.childAttr1)
{
$("#childVariations1 option").attr('selected','selected');
}
});
Any help would be very welcome as it's driven me over the edge.
$("#childVariations1 option") is an array of all the options. You need to specify which one:
$("#childVariations1 option").eq(1).attr('selected','selected');
If your case, use a for loop and use the index for get the current position, instead of using .each. (or set up a counter)