web-dev-qa-db-fra.com

Zone de liste déroulante en fonction de l'option sélectionnée dans une autre zone de liste déroulante

J'ai 2 différents SELECT OPTION dans un formulaire.

Le premier est la source, le second est le statut. J'aimerais que différentes options soient répertoriées dans la liste déroulante Statut en fonction de l'option sélectionnée dans la liste déroulante Source.

La source:

<select id="source" name="source">
     <option>MANUAL</option>
     <option>ONLINE</option>
</select>

Statut:

<select id="status" name="status">

</select>

Options: - Si la source est MANUEL, alors le statut est OUVERT ou LIVRÉ - si la source est EN LIGNE, le statut est OUVERT, LIVRÉ ou LIVRAISON

Ma tentative infructueuse:

            <script>
            $(document).ready(function () {
            var option = document.getElementById("status").options;
            if (document.getElementById('source').value == "MANUAL") {
                $("#status").append('<option>OPEN</option>');
                $("#status").append('<option>DELIVERED</option>');
                }
            if (document.getElementById('source').value == "ONLINE") {
                $("#status").append('<option>OPEN</option>');
                $("#status").append('<option>DELIVERED</option>');
                $("#status").append('<option>SHIPPED</option>');
                }
            });
            </script>
javascriptjqueryhtmlformsdrop-down-menu
4
samyb8

essayez quelque chose comme ça ... jsfiddle demo

HTML

 Source:   <select id="source" name="source">
     <option>MANUAL</option>
     <option>ONLINE</option> </select>

Status:

<select id="status" name="status">
    <option>OPEN</option>
      <option>DELIVERED</option>
    </select>

JS

$(document).ready(function() {

  $("#source").change(function() {

    var el = $(this) ;

    if(el.val() === "ONLINE" ) {
    $("#status").append("<option>SHIPPED</option>");
    }
      else if(el.val() === "MANUAL" ) {
        $("#status option:last-child").remove() ; }
  });

});
5
Psych Half

Je poste cette réponse, car de cette manière, vous n’auriez jamais besoin d’un plugin tel que jQuery ni aucun autre, c’est la solution par simple javascript.

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript">
    function dynamicdropdown(listindex)
    {
        switch (listindex)
        {
        case "manual" :
            document.getElementById("status").options[0]=new Option("Select status","");
            document.getElementById("status").options[1]=new Option("OPEN","open");
            document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
            break;
        case "online" :
            document.getElementById("status").options[0]=new Option("Select status","");
            document.getElementById("status").options[1]=new Option("OPEN","open");
            document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
            document.getElementById("status").options[3]=new Option("SHIPPED","shipped");
            break;
        }
        return true;
    }
    </script>
    </head>
    <title>Dynamic Drop Down List</title>
    <body>
    <div class="category_div" id="category_div">Source:
        <select id="source" name="source" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
        <option value="">Select source</option>
        <option value="manual">MANUAL</option>
        <option value="online">ONLINE</option>
        </select>
    </div>
    <div class="sub_category_div" id="sub_category_div">Status:
        <script type="text/javascript" language="JavaScript">
        document.write('<select name="status" id="status"><option value="">Select status</option></select>')
        </script>
        <noscript>
        <select id="status" name="status">
            <option value="open">OPEN</option>
            <option value="delivered">DELIVERED</option>
        </select>
        </noscript>
    </div>
    </body>
</html>

Pour plus de détails, je veux dire pour rendre dynamique et plus dépendante, veuillez consulter mon article créer une liste déroulante dynamique

3
Jyotiranjan

Dans this jsfiddle vous trouverez une solution que j'ai conçue. L'idée est d'avoir une paire de sélecteurs en HTML et d'utiliser du javascript (simple) pour filtrer les options du sélecteur dépendant, en fonction de l'option sélectionnée du premier. Par exemple:

<select id="continents">
 <option value = 0>All</option>   
 <option value = 1>Asia</option>
 <option value = 2>Europe</option>
 <option value = 3>Africa</option>
</select> 
<select id="selectcountries"></select>

Usages (dans le jsFiddle) 

 MAIN.createRelatedSelector
     ( document.querySelector('#continents')           // from select element
      ,document.querySelector('#selectcountries')      // to select element
      ,{                                               // values object 
        Asia: ['China','Japan','North Korea',
               'South Korea','India','Malaysia',
               'Uzbekistan'],
        Europe: ['France','Belgium','Spain','Netherlands','Sweden','Germany'],
        Africa: ['Mali','Namibia','Botswana','Zimbabwe','Burkina Faso','Burundi']
      }
      ,function(a,b){return a>b ? 1 : a<b ? -1 : 0;}   // sort method
 );
1
KooiInc
    function dropdownlist(listindex)
    {
         document.getElementById("ddlCity").options.length = 0;
         switch (listindex) 
         {
             case "Karnataka":
                     document.getElementById("ddlCity").options[0] = new Option("--select--", "");
                     document.getElementById("ddlCity").options[1] = new Option("Dharawad", "Dharawad");
                     document.getElementById("ddlCity").options[2] = new Option("Haveri", "Haveri");
                     document.getElementById("ddlCity").options[3] = new Option("Belgum", "Belgum");
                     document.getElementById("ddlCity").options[4] = new Option("Bijapur", "Bijapur");

                 break;

             case "Tamilnadu":
                 document.getElementById("ddlCity").options[0] = new Option("--select--", "");
                 document.getElementById("ddlCity").options[1] = new Option("dgdf", "dgdf");
                 document.getElementById("ddlCity").options[2] = new Option("gffd", "gffd");


                 break;
         }

    }

* Etat: --Sélectionner-- Karnataka Tamil Nadu Andra pradesh Telngana 

    <div>
        <p>

            <label id="lblCt">
            <span class="red">*</span>
                City:</label>
            <select id="ddlCity">
               <!-- <option>--Select--</option>
                <option value="1">Dharawad</option>
                <option value="2">Belgum</option>
                <option value="3">Bagalkot</option>
                <option value="4">Haveri</option>
                <option>Hydrabadh</option>
                <option>Vijat vada</option>-->
            </select>
            <label id="lblCity"></label>
        </p>
    </div>
1
chetan

pour cela, j'ai remarqué qu'il était bien préférable d'afficher et de masquer les balises plutôt que de les ajouter et de les supprimer pour le DOM. Cela fonctionne mieux de cette façon.

0
asiby

J'espère que le code suivant aidera ou résoudra votre problème ou que vous ne pensez pas que la visite soit compréhensible http://phppot.com/jquery/jquery-dependent-dropdown-list-countries-and-states/ .

SÉLECTION DEPENDANTE HTML DYNAMIQUE

<div class="frmDronpDown">
<div class="row">
    <label>Country:</label><br/>
    <select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
    <option value="">Select Country</option>
    <?php
    foreach($results as $country) {
    ?>
    <option value="<?php echo $country["id"]; ?>"><?php echo $country["name"]; ?></option>
    <?php
    }
    ?>
    </select>
</div>
<div class="row">
    <label>State:</label><br/>
    <select name="state" id="state-list" class="demoInputBox">
    <option value="">Select State</option>
    </select>
</div>

OBTENIR DES ÉTATS VIA AJAX

<script> function getState(val) { $.ajax({
type: "POST",
url: "get_state.php",
data:'country_id='+val,
success: function(data){
    $("#state-list").html(data);
}
});} </script>

LIRE LA BASE DE DONNEES D'ETAT EN PHP

<?php require_once("dbcontroller.php"); $db_handle = new DBController();if(!empty($_POST["country_id"])) {
$query ="SELECT * FROM states WHERE countryID = '" . $_POST["country_id"] . "'";
$results = $db_handle->runQuery($query); ?> <option value="">Select State</option><?php foreach($results as $state) { ?> <option value="<?php echo $state["id"]; ?>"><?php echo $state["name"]; ?></option><?php } } ?>
0
Ace

Vous feriez mieux de faire deux selects et de montrer l'un tout en cachant l'autre.

C'est plus facile, et ajouter options à selects avec votre méthode ne fonctionnera pas dans IE8 (si vous y tenez).

0
Matthew Rapati