web-dev-qa-db-fra.com

Premier menu déroulant pour changer automatiquement les options d'un deuxième menu déroulant

J'ai deux menus déroulants où les options ne sont pas extraites de la base de données.

Le premier permet à l'utilisateur de sélectionner une catégorie.

<select name="category">
    <option value="0">None</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
</select>

Les options de la seconde dépendent du choix dans le premier menu déroulant. Par exemple, si l’utilisateur choisit l’option First , le second menu déroulant affiche

<select name="items">
    <option value="3">Smartphone</option>
    <option value="8">Charger</option>
</select>

mais lorsque l'utilisateur change d'avis ou choisit d'abord l'option second , le second menu déroulant affiche alors 

<select name="items">
    <option value="1">Basketball</option>
    <option value="4">Volleyball</option>
</select>

Ma question est comment puis-je y parvenir? Cela peut-il être fait sans utiliser de base de données? 

Je vous remercie!

phpjavascriptjqueryhtml
10
EnexoOnoma

Voir ci-dessous pour voir le Exemple de travail sans utiliser une base de données .

Exemple de travail utilisant la base de données MySQL

Si vous voulez le connecter en utilisant Database, oui, c'est sûrement possible. Considérez ce tableau:

CREATE TABLE `contents` (
    `id` INT PRIMARY KEY AUTO_INCREMENT,
    `name` VARCHAR (255),
    `parent` INT DEFAULT 0
);

INSERT INTO `contents` (`name`, `parent`) VALUES
    ('Names', 0),
    ('Places', 0),
    ('Animals', 0),
    ('Praveen', 1),
    ('Bill Gates', 1),
    ('Steve Jobs', 1),
    ('India', 2),
    ('New York', 2),
    ('London', 2),
    ('Singapore', 2),
    ('Cat', 3),
    ('Dog', 3),
    ('Tiger', 3),
    ('Deer', 3)

Structure de la table

+----+------------+--------+
| id | name       | parent |
+----+------------+--------+
|  1 | Names      |      0 |
|  2 | Places     |      0 |
|  3 | Animals    |      0 |
|  4 | Praveen    |      1 |
|  5 | Bill Gates |      1 |
|  6 | Steve Jobs |      1 |
|  7 | India      |      2 |
|  8 | New York   |      2 |
|  9 | London     |      2 |
| 10 | Singapore  |      2 |
| 11 | Cat        |      3 |
| 12 | Dog        |      3 |
| 13 | Tiger      |      3 |
| 14 | Deer       |      3 |
+----+------------+--------+

Code HTML initial et PHP

Utilisons maintenant PHP pour remplir d'abord le <select> initial:

<?php
    mysql_connect();
    mysql_select_db("contents");
    $result = mysql_query("SELECT * FROM `contents` WHERE `parent` = 0");
    while(($data = mysql_fetch_array($result)) !== false)
        echo '<option value="', $data['id'],'">', $data['name'],'</option>'
?>

Maintenant, le <select> est prêt. Avec sa fonction onchange, nous pouvons déclencher un événement AJAX pour obtenir le nouveau <select> avec les données fournies par le parent <select>.

<select onchange="ajaxfunction(this.value)">
    <!-- Options would have been initially populated here -->
</select>

Maintenant pour la fonction jQuery, vous pouvez faire ceci:

<script type="text/javascript">
    function ajaxfunction(parent)
    {
        $.ajax({
            url: 'process.php?parent=' + parent;
            success: function(data) {
                $("#sub").html(data);
            }
        });
    }
</script>

Dans le code HTML, après le <select>, vous devez donner une autre select avec une id comme sub.

<select onchange="ajaxfunction(this.value)">
    <!-- Options would have been initially populated here -->
</select>
<select id="sub"></select>

Traitement du code source PHP

Enfin le code source de process.php:

<?php
    mysql_connect();
    mysql_select_db("contents");
    $result = mysql_query("SELECT * FROM `contents` WHERE `parent` = " . mysql_real_escape_string($_GET["parent"]));
    while(($data = mysql_fetch_array($result)) !== false)
        echo '<option value="', $data['id'],'">', $data['name'],'</option>'
?>

Exemple de travail sans utiliser une base de données

Il vous suffit de remplacer ceci dans PHP.

<?php
    $parent = array("Name", "Place", "Animals");
    foreach ($parent as $id => $name)
        echo '<option value="s', $id,'">', $name,'</option>'
?>

Et pour le process.php:

<?php
    $parent = array("Name", "Place", "Animals");
    $s0 = array("Praveen", "Bill Gates", "Steve Jobs");
    foreach (${$_GET["parent"]} as $id => $name)
        echo '<option value="', $data['id'],'">', $data['name'],'</option>'
?>
14
Praveen Kumar Purushothaman

La partie concernant la base de données n'est pas très claire, car les personnes sélectionnées seraient probablement "répertoriées" d'une manière ou d'une autre. Si vous les avez sous un autre format, cela a du sens, ou si vous demandez si un rappel à la base de données (postback) est nécessaire, la réponse est non. Mais ce que vous voulez dire n'est pas clair.

Quoi qu'il en soit, vous pouvez utiliser une valeur rel="" (ou data-items="") pour définir la relation entre l'un des éléments sélectionnés. 

Par exemple:

CSS

.cascade {
    display: none;
}

HTML - Modifié

<select name="category">
    <option value="0">None</option>
    <option value="1" rel="accessories">Cellphones</option>
    <option value="2" rel="sports">Sports</option>
    <option value="3" rel="cars">Cars</option>
</select>
<select name="items" class="cascade">
    <option value="3" class="accessories">Smartphone</option>
    <option value="8" class="accessories">Charger</option>
    <option value="1" class="sports">Basketball</option>
    <option value="4" class="sports">Volleyball</option>
    <option value="6" class="cars">Corvette</option>
    <option value="2" class="cars">Monte Carloe</option>
</select>

jQuery

$(document).ready(function(){
    var $cat = $('select[name=category]'),
        $items = $('select[name=items]');

    $cat.change(function(){
        var $this = $(this).find(':selected'),
            rel = $this.attr('rel'),
            $set = $items.find('option.' + rel);

        if ($set.size() < 0) {
            $items.hide();
            return;
        }

        $items.show().find('option').hide();

        $set.show().first().prop('selected', true);
    });
});

http://jsfiddle.net/userdude/bY5LF/

5
Jared Farrish

Voici un autre exemple. En principe, toutes les données sont sur la page d’un objet et vous l’utilisez pour afficher les différentes catégories FIDDLE

var categories = {
    "None":[{value:'3', text:'No cataegory selected'}],
    "First":[{value:'1', text:'Bmw'},{value:'2', text:'Benz'}],
    "Second":[{value:'4', text:'PlayStation'},{value:'5', text:'Xbox'},{value:'10', text:'Wii'}],
    "Third":[{value:'6', text:'Dell'},{value:'7', text:'Acer'}],
    "Fourth":[{value:'8', text:'Audi'},{value:'9', text:'Datsun'}]
};
function selectchange(){
    var select = $('[name=items]');
    select.empty();
    $.each(categories[$(':selected', this).text()], function(){
        select.append('<option value="'+this.value+'">'+this.text+'</option>');
    });
}
$(function(){
    $('[name=category]').on('change', selectchange);
});
4
Musa

2 Démo de travail pour votre code:)http://jsfiddle.net/PnSCL/2/OU _ ​​ http://jsfiddle.net/PnSCL/

C'est réalisable, mais vous devez établir une relation entre le premier et le deuxième choix. 

S'il vous plaît jeter un oeil ici aussi: _ { http://api.jquery.com/data/ _

J'ai ajouté label pour la relation ici _ { http://jsfiddle.net/PnSCL/2/ } _ [ http://www.w3schools.com/tags/tag_option.asp ]

Behavior Lorsque vous sélectionnez l'option first dans select1, smartphone, chargers s'affiche. Sinon, lorsque l'utilisateur sélectionne second dans select1, il affiche baskeball, voleyball dans select2. 

J'espère que cela aide, s'il vous plaît faites le moi savoir si j'ai manqué quelque chose.

Démo 1

Code

$("#category").change(function() {
if($(this).data('options') == undefined){
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options',$('#select2 option').clone());
    }
var id = $(this).val();
var options = $(this).data('options').filter('[label=' + id + ']');
$('#select2').html(options);
   // alert(options);
});

HTML

<select name="select1" id="category">
    <option value="0">None</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
</select>

<select name="items" id="select2">

    <option value="3" label="1">Smartphone</option>
    <option value="8" label="1">Charger</option>

    <option value="1" label="2">Basketball</option>
    <option value="4" label="2">Volleyball</option>
</select>

DEMO 2 * Code *

$("#category").change(function() {
if($(this).data('options') == undefined){
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options',$('#select2 option').clone());
    }
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
    alert(options);
});

HTML

<select name="select1" id="category">
    <option value="0">None</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
</select>

<select name="items" id="select2">

    <option value="1">Smartphone</option>
    <option value="1">Charger</option>

    <option value="2">Basketball</option>
    <option value="2">Volleyball</option>
</select>
1
Tats_innit

Solution de travail sans utiliser de base de données:

HTML

<select name="country" id="country" onChange="showState();">   
    <option value="">Select Country</option>
    <option value="1">Pakistan</option>
    <option value="2">Saudi Arabia</option>
</select>

<div id="div_state"></div>

Jquery

<script>
    function showState()
    {
        $('body').css('cursor','wait');
        var value = document.getElementById('country').value;
        var url = 'http://fiddle.jshell.net/rathoreahsan/WcKQ2/4/show/';

        $.ajax({
            type: "GET",
            url: url,
            data:{'country':value},
            success:function(results)
            {              

                $('#div_state').html(results);

                if (value == "1") 
                {
                    $('#PK').css('display','block')                
                } 

                else if (value == "2") 
                {
                    $('#SA').css('display','block')                        
                }

                $('body').css('cursor','default');            

            }
        });
    }
</script>

CSS:

#PK, #SA { display: none; }

SEE DEMOhttp://jsfiddle.net/rathoreahsan/WyLsh/

States Page:http://fiddle.jshell.net/rathoreahsan/WcKQ2/4/show/

1
Ahsan Rathod

Voici un exemple complet très simple: 

L'URL externe nous enverra la liste d'options, puis nous attribuerons cette liste déroulante au deuxième menu déroulant à l'aide de la méthode jQuery $ (sélecteur) .html ().

<script type="text/javascript">

    $("#country").on('change',function(){
        var country= $(this).val();

        $.ajax({
            url: 'cities.php' ,
            type: 'POST',
            data: "country="+country,
            success: function(cities)
            {
                $("#cities").html(cities);
            }

        });
    });
</script>

Démo complète

0
Saddam Azad