Gewusst wie - 1. Dynamisches Dropdown MUSS aus dem 2. Dropdown-Menü auswählen?

Hier ist, was zu tun ist, dass - ich habe ein funktionierendes dynamisches Dropdown-Set aus MySQL-Tabellen. Ich versuche, das 1. Dropdown-Menü obligatorisch zu machen, um alle Optionen aus dem 2. Dropdown-Menü auszuwählen. Ich versuche, ausgewählte Option Wert von 1. Dropdown, in 2. Dropdown-Funktion ändern & überprüfen, ob es leer ist.Gewusst wie - 1. Dynamisches Dropdown MUSS aus dem 2. Dropdown-Menü auswählen?

Aber noch kein Erfolg. Hier ist der Code:

 <!doctype html> 
     <html> 
     <head> 
      <meta charset="utf-8"> 
      <title>Untitled Document</title> 

      <script type="text/javascript"> 

       $(document).ready(function (e) { 

        $("#cat").change(function one() { 

         var textval = $(":selected", this).html(); 
         var url = $(this).val(); // get selected value 

         if (url) { // require a URL 
          window.location = 'page.php?cat=' + url + '&subcat=' + textval; // redirect 
         } 

        // store value of selected option in url. This value be paseed on to below function two(); 

        // function two(url); 

        }) // cat change function ends 

        $("#subcat").change(function two() { 

         var numval = $(":selected", this).val(); 
         //$("#aid").val(numval); 

         var textval2 = $(":selected", this).html(); 
         //$('input[name=villa-name]').val(textval2); 

         window.location = window.location.href + '&subcat=' + numval; 


        }) 

       }); 


      </script> 


     </head> 
     <body> 
     </body> 
     </html>

Vielen Dank im Voraus. Du fragst dich immer noch, wie man das in jQuery macht?

Quelle

2016-07-09 luna.romania

Änderungsereignis in dd1 id tun smthing wie URL der Seite zu ändern, aber das ist nicht meine Sorge. Mein Problem ist - wenn ich die 2. Dropdown-Optionen wähle, ohne das erste Dropdown-Menü auszuwählen, darf es nicht erlaubt sein. Nun, wenn nichts aus dd1 ausgewählt wird, bedeutet dies, dass es leer ist, dann dd2 darf nicht erlaubt sein oder Alarm geben –

Ich bin mir nicht sicher, aber wenn Sie versuchen, eine URL aus dem ausgewählten Wert Ihrer zwei Dropdown-Listen zu erstellen, können Sie so etwas tun.

var catWasSelected = false; 
$("#cat").change(function() { 
    catWasSelected = true; 
}); 

$("#subcat").change(function() { 
    if(catWasSelected){ 
     var cat = $("#cat").val(); 
     var subcat = $("#subcat").val(); 
     window.location = 'page.php?cat=' + cat + '&subcat=' + subcat; 
    }else{ 
     // set the subcategory back to default 
     // something like: $("#subcat").val("default"); 
     alert("Please select a category"); 
    } 
});

Quelle

2016-07-09 14:03:54 Titus

$("#subcat").attr("disabled", "disabled"); 
 

 
$("#cat").change(function() { 
 
    if ($("#cat option:selected").val() !== "---") { 
 
    $("#subcat").removeAttr("disabled") 
 
    } else { 
 
    $("#subcat").attr("disabled", "disabled"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="cat"> 
 
    <option value="---">Select one</option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
</select> 
 

 
<select id="subcat"> 
 
    <option value="---">Select another</option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
</select>

Auch ich nehme an, Sie die Inhalte des zweiten Tropfens wollen sich auf die Wahl der ersten Dropdown-Liste ab. Es scheint, als ob Sie diese logische Server-Seite behandeln. Wenn Sie mit dieser Route fortfahren, können Sie das zweite Dropdown-Feld beim ersten Laden der Seite deaktivieren, indem Sie ein disabled="disabled"-Attribut zur Unterkategorie Element-Server hinzufügen.

Was stattdessen würde ich empfehlen, da es eine vollständige Seitenaktualisierung vermeidet, ist entweder der Server mit allen möglichen Kategorien und Unterkategorien ein bevölkerten JavaScript-Objekt enthalten haben, wenn die Seite geladen wird, oder Hinzufügen eines AJAX-Endpunkt Unterkategorien anfragen, wenn sich die Hauptkategorie ändert.

Die erste Option auf den Server haben würde etwa wie folgt in der Antwort:

<script type="text/javascript"> 
var categories = [ 
    { 
     name: 'Category 1', 
     value: 'cat1', 
     children: [ 
      { name: 'Subcategory 1', value: 'sub1' }, 
      { name: 'Subcategory 2', value: 'sub2' }, 
     ] 
    }, 
    { 
     name: 'Category 2', 
     value: 'cat2', 
     children: [ 
      { name: 'Subcategory 3', value: 'sub3' }, 
      { name: 'Subcategory 4', value: 'sub4' }, 
     ] 
    } 
]; 
</script>

... so könnte man dann das obige Beispiel ändern #cat aus diesem Array zu füllen, und #subcat basierend auf $('#cat option:selected').val() . Etwas wie folgt aus:

$("#cat").html('<option value="---">Select one</option>'); 
 
$("#subcat").html('<option value="---">Select another</option>'); 
 
$("#subcat").attr("disabled", "disabled"); 
 

 
categories.forEach(function(cat) { 
 
    var $cat = $("<option />") 
 
    .val(cat.value) 
 
    .html(cat.name); 
 
    $("#cat").append($cat); 
 
}); 
 

 
$("#cat").change(function() { 
 
    
 
    
 
    $("#subcat .subcat").remove(); 
 
    $("#subcat").attr("disabled", "disabled"); 
 
    
 
    var $selectedCategory = $('#cat option:selected'); 
 
    
 
    if ($selectedCategory.val() !== "---") { 
 
    
 
    $("#subcat").removeAttr("disabled"); 
 
    
 
    var cat = categories.find(function(cat) { 
 
     return cat.value === $selectedCategory.val(); 
 
    }); 
 
    
 
    if (cat.hasOwnProperty('children')) { 
 
     
 
     cat.children.forEach(function(subcat) { 
 
     
 
     var $subcat = $('<option class="subcat" />') 
 
      .val(subcat.value) 
 
      .html(subcat.name); 
 
     $("#subcat").append($subcat); 
 
     
 
     }); 
 
     
 
    } 
 
    
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script type="text/javascript"> 
 
var categories = [ 
 
    { 
 
     name: 'Category 1', 
 
     value: 'cat1', 
 
     children: [ 
 
      { name: 'Subcategory 1', value: 'sub1' }, 
 
      { name: 'Subcategory 2', value: 'sub2' }, 
 
     ] 
 
    }, 
 
    { 
 
     name: 'Category 2', 
 
     value: 'cat2', 
 
     children: [ 
 
      { name: 'Subcategory 3', value: 'sub3' }, 
 
      { name: 'Subcategory 4', value: 'sub4' }, 
 
     ] 
 
    } 
 
]; 
 
</script> 
 

 
<select id="cat"></select> 
 

 
<select id="subcat"></select>

Quelle

2016-07-09 14:38:49

Schön gemacht. Es macht mich glücklich zu sehen, dass Sie Javascript verwendet haben, um den Anfangswert von "deaktiviert" zu setzen. Viele Leute vergessen die graziöse Degradierung und setzen das Attribut in den HTML-Code, wodurch das Formular nutzlos wird, wenn JavaScript beim Laden der Seite aus irgendeinem Grund abbricht. –

Gewusst wie - 1. Dynamisches Dropdown MUSS aus dem 2. Dropdown-Menü auswählen?

Antwort

Verwandte Themen