How do i actually populate a multiple select box with php returned query, adding into multi dimensional array of jquery?

Question

Sorry for my bad English as I'm not native English speaker.

The question is this, I have plan to do a three multiple select box in a single page, how to retrieve the query data before hand when the query in php is executed, individual query loop result will be add into a multidimensional array. 2nd, when the user click on any one of the option on the 1st multiple select box, it will structure the 2nd select box accordingly to the by calling out reference from array, how do i work on this? Lastly, I would like to do this without using ajax.

Here's part of my code, Javascript/jquery + php

$(document).ready(function(){

    var selectValues = { "1" : "General Health",
                         "2": "Head and Neck", 
                         "3": "Ear, nose and throat" ,
                         "4": "Stomach, bowel and bladder",
                         "5": "Bones and muscles",
                         "6": "Mental Health or confusion",
                         "7": "Pregnancy Problem",
                         "8": "Accident, wound or injury"
                         };

    var $cateSymptom = $('#cateSymptom');
    var $dropdownSymptom = $("#dropdownSymptom");

    $.each(selectValues, function(key, value) {   
     $('#cateSymptom')
         .append($("<option></option>")
         .attr("value",key)
         .text(value)); 
});

<?php

    $query = "select a.*, asy.*, s.* from ailment as a join symptom_ailment as asy on a.ailment_id = asy.ailment_id join symptom as s on asy.symptom_id = s.symptom_id";


    $result = mysqli_query($conn,$query) or die(mysqli_error($conn));


    while($row = mysqli_fetch_assoc($result))
    {
$sid = $row["symptom_id"];
$sname = $row["symptom_name"];
$stype = $row["stype_id"];
$aname = $row["ailment_name"];
$aid = $row["ailment_id"];

    echo "<script>alert('$sid $sname $stype $aname $aid'); </script>";
?>

    var selectValues2 = { "<?php echo $stype; ?>" : 
                                            {   
                                                "<?php echo $sname ?>" : 
                                                        [ 
                                                        "<?php echo $aid ?>",
                                                        "<?php echo $aname; ?>" 
                                                        ]
                                            }
                        };


<?php }
 ?>

    $cateSymptom.change(function() {
    alert('1');
        $dropdownSymptom.empty().append(function() {

            alert('2');
            var output = '';
            console.debug(selectValues2);
            $.each(selectValues2[$cateSymptom.val()], function(key, value) {
            alert('3');
                output += '<option>' + key + '</option>';
            });
            return output;

        });

    }).change();

    });

HTML:

<div id="scCategory">
<h3>Choose Symptoms Category</h3>
<form name="frmSC2" method="POST" id="frmSC2">

<select multiple name="symp[]" id="cateSymptom"  style="width:230px;height:280px;">
</select>
</div>

<div id="scDepth">
<h3>List of Symptoms</h3>
<select multiple name="symptom[]" id="dropdownSymptom"  style="width:230px;height:280px;">
</select>
</div>

<div id="scCondition">
<h3>Possible Condition</h3>
<select multiple name="condition[]" id="dropdownCondition"  style="width:230px;height:240px;">
</select>
</div>

@charlietfl How to structure the arrays in javascript while still using PHP. Then, how do i can actually iterate thru the array in order to populate the multiple select box. — Vernon Tong
– Vernon Tong, Commented Jan 12, 2015 at 15:05

charlietfl · Accepted Answer · 2015-01-12 16:43:35Z

1

Following is a fully integrated solution for all 3 levels

Data structure uses objects with ID as keys, and a children property if applicable

var data = {
   "1": {
      "val": "1",
      "text": "General Health",
      "children": {
         "1.0": {
            "text": "Item - 1.0",
            "val": "1.0",
            "children": {
               "1.0.0": {
                  "text": "Item - 1.0.0",
                  "val": "1.0.0"
               }
            }
         }
}

In the JS the active data for each select is storedd on the element using jQuery data() for easy access to populate the next select within change handler

/* change handler to manage emptying and populating chained selects */
var $selects = $('select').change(function () {
    var idx = $selects.index(this),
        $currSelect = $(this),
        val = $currSelect.val(),
        $nextSelect = $selects.eq(idx + 1);
    if (idx < 2) {
        /* empty select(s) after this one */
        $selects.filter(':gt(' + idx + ')').empty();

        /* if value update next select */
        if (val) {
            var nextSelectData = $currSelect.data('selectData')[val].children;
            populateSelect($nextSelect, nextSelectData);
        }
    }
});
/* load first select */
populateSelect($selects.first(), data);

function populateSelect($select, selectData) {
    $select.append('<option value=""> -- Select -- </option>')
    $.each(selectData, function (key, item) {
        $select.append($("<option></option>")
            .attr("value", key)
            .text(item.text));
    });
    /* store the data on this element for easy access in change handler */
    $select.data('selectData', selectData);

}

DEMO

edited Jan 12, 2015 at 16:43

answered Jan 12, 2015 at 16:34

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Vernon Tong Over a year ago

Thanks for the informative reply on how to populate the data for select multiple chain and the explain on the array structure, but i still don't understand how do i actually can add in multiple row select separately into the data array from the result of query in php.

charlietfl Over a year ago

well you have some sort of relationship available in php or mysql don't you?

Vernon Tong Over a year ago

Yes, but wasn't what i mean. Let me give an example, lets say i have the a,b,c which correlates with option 1 and d,e,f correlates with option 2. option 1 and 2 should belongs in selection 1 and option a,b,c,d,e,f should belong to selection 2. furthermore, selecting a will also show a1,a2,a3 in selection 3. How do i actually allocate and organize that?

charlietfl Over a year ago

Can't really help a lot without knowing how your parent/child relationships are set up

Vernon Tong Over a year ago

Sorry about that. Anyway I have tried your solution, and i'm stuck when i trying to modify the getChildren function, [link]() here's my query result, the 1st parent would be the stype_id, 2nd parent is the symptom_id, then the last child is ailment_id. And how do i can do in a multiple-selection way, say knowing the next child will have the same parent, add only additional unique options?

|

Starboy · Accepted Answer · 2015-01-12 15:27:57Z

0

Since you don't want to use ajax.. The VERY DIRTY way to do this would be to output the PHP array on the page as something like an unordered list (and display:none; or jquery.hide) on those said lists. Point at them with Jquery like so:

var list1 = [];
$('classListOne.li').each(function(i, elem) {
    list1.push($(elem).text());
});

Then at that point since you need the next drop down's to reflect what a user implemented on the first drop down. Your going to need to create a pretty hariy IF/else and or CASE statement in Jquery. Once you find the array you need create a another drop-down and append it to where you need it to go like so:

var data = {
    'foo': 'bar',
    'foo2': 'baz'
}

var s = $('<select />');

for(var val in data) {
    $('<option />', {value: val, text: data[val]}).appendTo(s);
}

s.appendTo('body');

This again is a horrible why to do this, but I understand sometimes you can't always use the best technologies. Let me know if that helps at all.

answered Jan 12, 2015 at 15:27

Starboy

1,6353 gold badges20 silver badges27 bronze badges

1 Comment

charlietfl Over a year ago

don't see how this would work for multiple level select chain

Collectives™ on Stack Overflow

How do i actually populate a multiple select box with php returned query, adding into multi dimensional array of jquery?

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related