web-dev-qa-db-de.com

Erstes Dropdown-Menü zum automatischen Ändern der Optionen eines zweiten Dropdown-Menüs

Ich habe zwei Dropdown-Menüs, bei denen die Optionen nicht aus der Datenbank stammen.

Beim ersten kann der Benutzer eine Kategorie auswählen.

<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>

Die Optionen der zweiten Option hängen von der Auswahl im ersten Dropdown-Menü ab. Wenn der Benutzer beispielsweise die Option First wählt, wird die zweite Dropdown-Liste angezeigt

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

wenn der Benutzer jedoch seine Meinung ändert oder zuerst die Option second wählt, wird nun das zweite Dropdown-Menü angezeigt 

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

Meine Frage ist, wie kann ich das erreichen? Ist dies ohne Datenbank möglich? 

Vielen Dank!

phpjavascriptjqueryhtml
10
EnexoOnoma

Nachfolgend finden Sie das Funktionsbeispiel ohne Verwendung einer Datenbank .

Arbeitsbeispiel mit MySQL-Datenbank

Wenn Sie es mit Database verbinden möchten, ist es sicherlich möglich. Betrachten Sie diese Tabelle:

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)

Tabellenstruktur

+----+------------+--------+
| 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 |
+----+------------+--------+

Ursprünglicher HTML- und PHP -Code

Jetzt können wir mit PHP zuerst den ursprünglichen <select> füllen:

<?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>'
?>

Nun ist der <select> fertig. Mit der Onchange-Funktion können wir ein Ereignis AJAX auslösen, um den neuen <select> mit den vom übergeordneten <select> bereitgestellten Daten abzurufen.

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

Jetzt für die jQuery-Funktion können Sie folgendermaßen vorgehen:

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

Im HTML-Code müssen Sie nach dem <select> eine andere select mit einer id als sub angeben.

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

Verarbeitung von PHP Quellcode

Schließlich der Quellcode von 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>'
?>

Arbeitsbeispiel ohne Verwendung einer Datenbank

Sie müssen dies nur im PHP ersetzen.

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

Und für den 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

Der Teil der Datenbank ist nicht wirklich klar, da die Auswahl vermutlich auf eine bestimmte Art "aufgelistet" wäre. Wenn Sie sie in einem anderen Format haben, ist dies sinnvoll oder Sie fragen, ob ein Rückruf in die Datenbank (postback) erforderlich ist. Die Antwort lautet "Nein". Aber es ist nicht klar, was du meinst.

Auf jeden Fall können Sie einen rel=""-Wert (oder data-items="") verwenden, um die Beziehung zwischen der einen Auswahl zur anderen zu setzen. 

Zum Beispiel:

CSS

.cascade {
    display: none;
}

HTML - Modifiziert

<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

Hier ist ein anderes Beispiel: Im Grunde befinden sich alle Daten auf der Seite in einem Objekt und Sie verwenden sie, um die verschiedenen Kategorien anzuzeigen 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 Arbeitsdemo für Ihren Code:)http://jsfiddle.net/PnSCL/2/ODER _ ​​ http://jsfiddle.net/PnSCL/

Es ist erreichbar, aber Sie müssen eine Beziehung zwischen der ersten und der zweiten Auswahl treffen. 

Bitte schauen Sie auch hier rein: http://api.jquery.com/data/

Ich habe label für die Beziehung hier hinzugefügt http://jsfiddle.net/PnSCL/2/ [ http://www.w3schools.com/tags/tag_option.asp ]

Behavior Wenn Sie die Option first von select1 auswählen, wird smartphone, chargers angezeigt. Andernfalls, wenn der Benutzer second von select1 auswählt, wird baskeball, voleyball in select2 angezeigt. 

Ich hoffe, das hilft. Bitte lassen Sie mich wissen, wenn ich etwas verpasst habe.

Demo 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

Arbeitslösung ohne Verwendung einer Datenbank:

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-Seite:http://fiddle.jshell.net/rathoreahsan/WcKQ2/4/show/

1
Ahsan Rathod

Hier ist ein sehr einfaches vollständiges Beispiel: 

Die externe URL sendet uns die Liste der Optionen, und dann weisen wir diese Dropdown-Liste mit der Methode jquery $ (Selector) .html () dem zweiten Dropdown-Menü zu.

<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>

Vollständige Demo

0
Saddam Azad