CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Geril
Geril

Reputation: 159

Selectbox change content using jQuery/AJAX

I am trying to find best solution for this: I will have categories, subcategories, sub-subcategories etc. and I need to have it in different selectboxes. Example: First there will be: 

<select>
    <option value="cars">Cars</option>
    <option value="electronic">Electronic</option>
    <option value="garden">Garden</option>
</select>

After that when user choose for example Cars this select box changes to 

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

Concept of page is just one box in the middle of page and after you choose first category this box will disappear and there come new box with subcategory. What is the best solution for that and how to do it in AJAX?

Upvotes: 0

Views: 1301

Answers (2)

TribalChief
TribalChief

Reputation: 785

I just wrote this JSFIDDLE: http://jsfiddle.net/thauwa/xGFQN/

Basically, what you have to do is use some code like this:

HTML

<select id="optionsSet1" class="justAnotherDropdown">
    <option value=""></option>
    <option value="cars">Cars</option>
    <option value="electronic">Electronic</option>
    <option value="garden">Garden</option>
</select>
<select id="optionsSet2" class="justAnotherDropdown"></select>
<select id="optionsSet3" class="justAnotherDropdown"></select>
<select id="optionsSet4" class="justAnotherDropdown"></select>

jQuery

$(".justAnotherDropdown").not($(".justAnotherDropdown").first()).hide(); // Hide everything but the first of the <select> tags
$(".justAnotherDropdown").change(function () { // The jQuery event handler.
    var changedID = $(this).attr('id');
    var prefixID = changedID.slice(0, -1);
    var nextIDNumber = parseInt(changedID.substr(changedID.length - 1)) + 1;
    var nextID = prefixID + nextIDNumber;
    var nextOptionsSet = "optionsSet" + nextIDNumber;
    $.ajax({
        url: 'yourPHPpage.php', // Change this to your PHP script's actual path.
        data: {
            value: $(this).val(), // Uncomment this line when using with PHP.
            id: changedID, // Uncomment this line when using with PHP.
        },
        type: "POST",
        success: function (response) {
            $("#" + changedID).hide(); // Hide the previous box.
            $("#" + nextID).html(response).show("slow"); // Drammatically show the next.
        }
    });
});

PHP

    $selectedItem = $_POST['id'];
    $selectedItemValue = $_POST['value'];
    switch ($selectedItem) {
        case 'optionsSet2':
            switch ($selectedItemValue) {
                case 'Cars':
                    echo 'HTML to display the relevant `options`, properly escaped.';
                    break;
                case 'Electronic':
                    echo 'HTML to display the relevant `options`, properly escaped.';
                    break;
                case 'Garden':
                    echo 'HTML to display the relevant `options`, properly escaped.';
                    break;
            }
            break;
        case 'optionsSet3':
            /** Add more code here. **/
    }
/** This method is very inefficient, and 'strainful', compared to using JSON. **/

I hope that the code is self-explanatory.

Upvotes: 1

Mauro
Mauro

Reputation: 2070

Dera Geril, what you are looking for is usually referred to as "cascading dropdown". There are tons of pages about the argument and it really depends on which technology you are using. Google it for literally thousands of resources, both in terms of tutorials, open source and licensed code.

To point out a couple of questions to ask yourself for better decision-making:

  1. Do I use any particular javascript framework? Is there code developed specifically for it?
  2. Do I need data coming from Ajax (as per your questions, yes, but it's worth pointing it out)?
  3. Do I need the cascading dropdown to work even with Javascript disabled?
  4. Do I want to write my own jQuery code to manage my ajax calls? Do I need more than updating the select boxes?

Possibly other considerations could be made.

Hope you find it useful.

Upvotes: 0

Related Questions