Ich möchte zwei Dropdown-Formulare erstellen und wenn ich einen Punkt im ersten Menü auswähle, zeigt das zweite Menü den entsprechenden Wert an. Zum Beispiel: Wenn ich im ersten Menü "Obst" auswähle, werden im zweiten Menü "Apfel", "Banane" usw. angezeigt. Es muss Werte enthalten, damit ich es in die Datenbank einfügen kann.

HTML ist wie folgt:

<select id="firstmenu" name="fruit">
<option value="apple">apple</option>
<option value="banana">banana</option>
</select>
<br/>
<select id="secondmenu" name="vegetable">
<option value="carrot">carrot</option>
<option value="celery">celery</option>
</select>

Javascript; Ich dachte mit so etwas, aber ich habe kein Verständnis für Javascript

<script>
var a=document.forms["myform"]["fruit"].value;
var b=document.forms["myform"]["vegetable"].value;

if (a=="fruit")
{
...
}
</script>

Könnte mir jemand ein Codebeispiel geben? Hilfe wird sehr geschätzt, danke.

8
fredriklind 10 Dez. 2013 im 04:07

4 Antworten

Beste Antwort

Gut,

Wie wäre es mit jQuery?

http://jsfiddle.net/W4m9S/1/

    var items = [
    {
        name: '---',
        value:'',
        subitems: []
    },
    {
        name:'Fruit', 
        value: 'fruit', 
        subitems: [
            {name: 'Apple', value: 'apple'}, 
            {name:'Banana', value:'banana'}
        ]
    },
    {
        name: 'Vegetable',
        value: 'vegetable',
        subitems: [
            {name: 'Carrot', value:'carrot'},
            {name: 'Celery', value:'celery'}
        ]
    }
];


$(function(){
    var temp = {};

    $.each(items, function(){
        $("<option />")
        .attr("value", this.value)
        .html(this.name)
        .appendTo("#firstmenu");
        temp[this.value] = this.subitems;
    });

    $("#firstmenu").change(function(){
        var value = $(this).val();
        var menu = $("#secondmenu");

        menu.empty();
        $.each(temp[value], function(){
            $("<option />")
            .attr("value", this.value)
            .html(this.name)
            .appendTo(menu);
        });
    }).change();


});
5
Tolgahan Albayrak 10 Dez. 2013 im 03:55

Ich habe Javascript verwendet, um ein Dropdown-Menü zu erstellen. Wenn der Benutzer dann Obst im Haupt-Dropdown-Menü ausgewählt hat, habe ich "Obst" -Optionen erstellt, und wenn der Benutzer Gemüse im Haupt-Dropdown-Menü ausgewählt hat, habe ich "Gemüse" -Optionen erstellt.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function displayAccordingly() {

            //Call mainMenu the main dropdown menu
            var mainMenu = document.getElementById('mainMenu');

            //Create the new dropdown menu
            var whereToPut = document.getElementById('myDiv');
            var newDropdown = document.createElement('select');
            newDropdown.setAttribute('id',"newDropdownMenu");
            whereToPut.appendChild(newDropdown);

            if (mainMenu.value == "fruit") { //The person chose fruit

                //Add an option called "Apple"
                var optionApple=document.createElement("option");
                optionApple.text="Apple";
                newDropdown.add(optionApple,newDropdown.options[null]);

                //Add an option called "Banana"
                var optionBanana=document.createElement("option");
                optionBanana.text="Banana";
                newDropdown.add(optionBanana,newDropdown.options[null]);

            } else if (mainMenu.value == "vegetable") { //The person chose vegetabes

                //Add an option called "Spinach"
                var optionSpinach=document.createElement("option");
                optionSpinach.text="Spinach";
                newDropdown.add(optionSpinach,newDropdown.options[null]);

                //Add an option called "Zucchini"
                var optionZucchini=document.createElement("option");
                optionZucchini.text="Zucchini";
                newDropdown.add(optionZucchini,newDropdown.options[null]);

            }

        }
    </script>
</head>
    <body>
        <select id="mainMenu" onchange="displayAccordingly()">
        <option value="">--</option>
        <option value="fruit">Fruit</option>
        <option value="vegetable">Vegetable</option>
        </select>
        <div id="myDiv"></div>
    </body>

</html>

Jedes Mal, wenn sich der Wert des Dropdown-Menüs ändert, wird die Funktion displayAccordingly () ausgeführt. Es wird ein neues Dropdown-Menü erstellt. Wenn der Wert des Haupt-Dropdown-Menüs Obst ist, werden dem neu erstellten Dropdown-Menü Fruchtoptionen hinzugefügt. Wenn der Wert des Haupt-Dropdown-Menüs Gemüse ist, werden Gemüseoptionen hinzugefügt zum neu erstellten Dropdown-Menü.

Ich hoffe das hilft! :) :)

BEARBEITEN: Wenn Sie den Wert der Dropdown-Liste zweimal ändern, werden zwei Dropdown-Menüs erstellt. Ich habe eine weitere Variable hinzugefügt, um das zu beheben:

<!DOCTYPE html>
<html>
    <head>
    <script type="text/javascript">
    var created = 0;

        function displayAccordingly() {

            if (created == 1) {
                removeDrop();
            }

            //Call mainMenu the main dropdown menu
            var mainMenu = document.getElementById('mainMenu');

            //Create the new dropdown menu
            var whereToPut = document.getElementById('myDiv');
            var newDropdown = document.createElement('select');
            newDropdown.setAttribute('id',"newDropdownMenu");
            whereToPut.appendChild(newDropdown);

            if (mainMenu.value == "fruit") { //The person chose fruit

                //Add an option called "Apple"
                var optionApple=document.createElement("option");
                optionApple.text="Apple";
                newDropdown.add(optionApple,newDropdown.options[null]);

                //Add an option called "Banana"
                var optionBanana=document.createElement("option");
                optionBanana.text="Banana";
                newDropdown.add(optionBanana,newDropdown.options[null]);

            } else if (mainMenu.value == "vegetable") { //The person chose vegetabes

                //Add an option called "Spinach"
                var optionSpinach=document.createElement("option");
                optionSpinach.text="Spinach";
                newDropdown.add(optionSpinach,newDropdown.options[null]);

                //Add an option called "Zucchini"
                var optionZucchini=document.createElement("option");
                optionZucchini.text="Zucchini";
                newDropdown.add(optionZucchini,newDropdown.options[null]);

            }

            created = 1

        }

        function removeDrop() {
            var d = document.getElementById('myDiv');

            var oldmenu = document.getElementById('newDropdownMenu');

            d.removeChild(oldmenu);
        }
    </script>
    </head>
    <body>
        <select id="mainMenu" onchange="displayAccordingly()">
        <option value="">--</option>
        <option value="fruit">Fruit</option>
        <option value="vegetable">Vegetable</option>
        </select>
        <div id="myDiv"></div>
    </body>

</html>
5
416E64726577 10 Dez. 2013 im 02:46

Ich denke, dieses Beispiel passt möglicherweise zu Ihren Anforderungen. Hier habe ich statischen Inhalt für die zweite Option in der Funktion dynamicdropdown () festgelegt. Kein Problem, Sie können dies mit Ihrem dynamischen Inhalt durch Option Objekt machen. Zum Beispiel

document.getElementById("subcategory").options[i] = new Option("key","value",false, false)

i ist Ihre Nummer für dynamische Werte.

Weitere Informationen finden Sie im Demo-Teil DEMO von dynamische Dropdown-Menüwerte

<html>
    <head>
        <title>Create dyanamic dropdown list in javascript</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script language="javascript" type="text/javascript">
        function dynamicdropdown(listindex)
        {
            document.getElementById("subcategory").length = 0;
            switch (listindex)
            {
            case "fruits" :
                document.getElementById("subcategory").options[0]=new Option("Please select fruits","");
                document.getElementById("subcategory").options[1]=new Option("apple","apple");
                document.getElementById("subcategory").options[2]=new Option("banana","banana");
                document.getElementById("subcategory").options[3]=new Option("mangoes","mangoes");
                break;

            case "meats" :
                document.getElementById("subcategory").options[0]=new Option("Please select meats","");
                document.getElementById("subcategory").options[1]=new Option("pigs","pigs");
                document.getElementById("subcategory").options[2]=new Option("chicken","chicken");
                break;
            }
            return true;
        }
       </script>
    </head>
    <title>Dynamic Drop Down List</title>
    <body>
        <div class="category_div" id="category_div">Please specify food items:
        <select name="category" class="required-entry" id="category" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
            <option value="">Select food items</option>
            <option value="Php">fruits</option>
            <option value="Javascript">meats</option>
        </select>
        </div>
        <div class="sub_category_div" id="sub_category_div">Please select foods:
        <script type="text/javascript" language="JavaScript">
            document.write('<select name="subcategory" id="subcategory"><option value="">Please select foods</option></select>')
        </script>
        <noscript>
            <select name="subcategory" id="subcategory" >
            <option value="">Please select foods</option>
            </select>
        </noscript>
        </div>
    </body>
</html>

Weitere Informationen finden Sie auch unter: Referenz

2
Jyotiranjan 30 März 2015 im 10:36

Ich bin ein wenig verwirrt über Ihr Problem, aber ich habe gerade zwei Beispielbeispiele für Sie geschrieben: DEMO1 und DEMO2

DEMO1 - Javascript

window.onload = function() {
    document.getElementById("firstmenu").addEventListener('change',function(e) {ha(e,'firstmenu','secondmenu');}, false);
};

function ha(e,first,second){
    var firstOptions = document.getElementById(first).options;
    var secondOptions = document.getElementById(second).options;
    for(var i = 1, j = firstOptions.length; i < j; i++) {
        secondOptions[i].value = firstOptions[i].value;
        secondOptions[i].text = firstOptions[i].text;
    }
};

DEMO2 - Javascript

window.onload = function() {
   document.getElementById("firstmenu").addEventListener('change',function(e) {ha(e,'secondmenu');}, false);
   document.getElementById("secondmenu").addEventListener('change',function(e) {ha(e,'firstmenu');}, false);
};
function ha (e,id){
   var index = e.target.selectedIndex;
   document.getElementById(id).selectedIndex = index;
};

DEMO1 und DEMO2 haben dasselbe HTML:

<select id="firstmenu" name="City">
    <option value="--">--</option>
    <option value="NY">NY</option>
    <option value="LA">LA</option>
</select>
<br/>
<select id="secondmenu" name="zipCode">
    <option value="--">--</option>
    <option value="10001">10001(NY)</option>
    <option value="90001">90001(LA)</option>
</select>

Hoffe das wird dir helfen !!

1
F.C.Hsiao 10 Dez. 2013 im 03:22