CODEWITHSUNDEEP
jquery
user1176783
user1176783

Reputation: 673

using jquery how do I filter a dropdown field based on value selected from another dropdown field

I am just missing something.

Very simple or so I thought - using jquery - Based on the value selected in the Workers dropdown, I want to display only certain values in the Fruit Options dropdown.

So for example if Roy is selected from the Workers dropdown, I only want Apples and Peaches to appear as options within the Fruit Options Dropdown If John is selected from the Workers dropdown, then only Oranges, Pears, Peaches, Nuts to appear as options within the Fruit Options Dropdown.

How do I correctly, using jquery, filter the Fruit Options drop based on the selection of the Worker dropdown?

My jfiddle is here: http://jsfiddle.net/justmelat/BApMM/1/

My Code:

 <form method="post">
    Worker:  <select  id="workers" name="Select1">
    <option>Roy</option>
    <option>John</option>
<option>Dave</option>
    </select>
</form>
<br><br>
<form method="post">
    Fruit Options: <select id="fruitopts" name="Select2">
    <option>Apples</option>
    <option>Oranges</option>
    <option>Pears</option>
    <option>Peaches</option>
    <option>Grapes</option>
    <option>Melons</option>
    <option>Nut</option>
    <option>Jelly</option>
    </select></form>

Upvotes: 3

Views: 23198

Answers (3)

Learner
Learner

Reputation: 4004

Do something like this:

<select id="worker"></select>
<select id="fruits"></select>

var data = [ // The data
    ['Roy', [
        'Apples','Peaches'
    ]],
    ['John', [
        'Oranges', 'Pears', 'Peaches', 'Nuts'
    ]]
];

$a = $('#worker'); // The dropdowns
$b = $('#fruits');

for(var i = 0; i < data.length; i++) {
    var first = data[i][0];
    $a.append($("<option>"). // Add options
       attr("value",first).
       data("sel", i).
       text(first));
}

$a.change(function() {
    var index = $(this).children('option:selected').data('sel');
    var second = data[index][1]; // The second-choice data

    $b.html(''); // Clear existing options in second dropdown

    for(var j = 0; j < second.length; j++) {
        $b.append($("<option>"). // Add options
           attr("value",second[j]).
           data("sel", j).
           text(second[j]));
    }
}).change(); // Trigger once to add options at load of first choice

http://jsfiddle.net/xRTAk/

Upvotes: 2

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79850

You need a data structure to map the relationship between worker and the fruit. Something like below,

var workerandFruits = {
    Roy: ["Apples", "Peaches"],
    John: ["Oranges", "Pears", "Peaches", "Nut"]
}

Then you need to write an onchange handler for $('select[name=Select1') inside which you need to filter the $('select[name=Select2]) options based on the selected options text in Select1 ($(this).find('option:selected').text();).

Now using the workerandFruits var you can determine the fruits that the selected worker prefer and populate the Select2 based on that.

$workers.change(function () {
    var $selectedWorker = $(this).find('option:selected').text();
    $fruits.html($fruitsList.filter(function () {
         return $.inArray($(this).text(), workerandFruits[$selectedWorker]) >= 0;
    }));
});

DEMO: http://jsfiddle.net/tKU26/

Upvotes: 5

cssyphus
cssyphus

Reputation: 40106

Using AJAX is a great way to do what you are asking.

Please forgive me if you already know this but in jQuery/javascript, you:

  • grab the value of the first select box

  • use AJAX code to send that to a secondary PHP file, which uses the data it receives to write some HTML code based on what the user chose

  • the newly constructed HTML is ECHOed back to the ajax routine, where it is received inside a success function

  • Inside the success function, you can use jQuery to replace the contents of the second dropdown

Here is a detailed example, with explanations

Upvotes: 0

Related Questions