How to pass selected drop down menu value to JSON function via JQuery/Javascript properly

Question

I am using JQuery Mobile, Javascript, HTML, JSON, AJAX, PHP and MySQL to dynamically display values from the database onto a webpage.

I have a few elements working together. First a drop down menu that populates a list view. The drop down menu elements are obtained from the database. This is done via the "on change" method, when activated it passes the selected option and the ID of the drop down menu to a JSON function, which takes care of retrieving the data from the database with the help of PHP and functions. I also have a radio button that works as a filter to the type of results that are to be retrieved from the database and displayed on the list view.

My problem is hopefully simpler than it looks. I am trying to pass my JSON function the value of the selected option from the drop down menu. I know that the JSON wants an object, but I am having problems doing this.

To illustrate how I try to do this, let's say I have a drop down list with fruits, I have a radio button that allows you to choose from Red fruits or Green fruits, and a list view to display my results:

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">

        <input type="radio" name="radio" id="red" value="1" checked="checked" onchange="change_fruit_color('red');"/>
        <label for="red">Red Fruits</label>
        <input type="radio" name="radio" id="green" value="2" onchange="change_fruit_color('green');"/>
        <label for="green">Green Fruits</label>

    </fieldset>
</div>

<li>
    <label for="fruit" class="select">Fruits</label>
    <select name="fruit" id="fruit" data-mini="true" onclick="populate_list('fruit', this);" onchange="clear_dropdown('fruit'); refresh_dropdown('fruit');">
        <option value=""></option>
    </select>
</li>

Note that I have a few extra functions, refresh_dropdown() and clear_dropdown() handle refreshing my drop down list items, nothing to worry about there. The populate_list function works good too. The issue is regarding the logic of the change_fruit_color() function:

function change_fruit_color(fruit_color)
{
    var selected_value = $("#fruits option:selected").text();

    if(selected_value)
    {
        switch(fruit_color)
        {
            case "red":
            populate_list('red', selected_value);
            break;

            case "practice":
            populate_list('green', selected_value);
            break;
        }
        clear_dropdown("fruit");
        refresh_dropdown("fruit");
    }
}

function populate_list(selected_fruit, this_menu)
{
    var find_fruit_url = server_root_url + 'fruit/find_fruit.php';
    var value = this_menu.options[this_menu.selectedIndex].value;

    var params = {
        control: selected_fruit,
        value: value
    };

    $.ajax({
    type: "POST",
    url: find_fruit_url,
    async:false,
    data: params,
        success: function(json){
            json_populate(json, selected_fruit, value);
        }
    });            
}

As you can see, I can call the populate_list three times; once within the "onclick" function of the drop down list, the other within the change_fruit_color that's called via the "onchange" event in the radio button box. In here is where the issue lies.

I tried to make a sample of my general issue so that I write way less code for all of you to read through. Any help on how to proceed would be greatly appreciated!

Answer 1

You're passing selected_value as the second argument to populate_list , but your second argument ( this_menu ) is supposed to be the select if you want to get the options property on it. I would rename the this_menu argument to selected_value and use that instead of fetching the value from the select again.

Answer 2

Please post your json_populate function to be check what's going on there. Maybe a time saver would be how you properly format a JSON array. Remember that you've have to use the following notation when dealind with JSON arrays...

var myJsonArray = {
                    "name_1": value1,
                    "name_2": value2
                  };

So maybe your param's var should go as this:

var params = {
    "control": selected_fruit,
    "value": value
};

Hope this helps. Luis M.

Answer 3

I solved a similar issue by using this code:

$.post(urlpath,formData,'json')

    .done(function(data) {

    $.each(data.collection, function (key, value) {
    $("#priorityid").append("<option value='"+value.codemaster_detls_name+"'>" + value.codemaster_detls_name + "</option>");

})

Priorityid is the id of the particular list, codemaster_detls_name is my mysql table name from which I am retrieving data.