Ich habe zwei Auswahllisten,
Auswahlliste 1 enthält die Markennamen des Mobiltelefons

<select name="mobile-phone" class="mobile-phone">
    <option value="Select">Select</option>
    <option value="Nokia">Nokia</option>
    <option value="Samsung">Samsung</option>
    <option value="HTC">HTC</option>
    <option value="Apple">Apple</option>
</select>

Auswahlliste 2 enthält den Telefontyp wie

<select name="mobile-model" class="mobile-model">
    <option value="Select">Select</option>
    <option value="Nokia--Lumia-520">Lumia 520</option>
    <option value="Nokia--Lumia-620">Lumia 620</option>
    <option value="Samsung--Galaxy-s3">Galaxy S3</option>
    <option value="Samsung--Galaxy-s4">Galaxy S4</option>
    <option value="HTC--hero">Hero</option>
    <option value="HTC--one">One</option>
    <option value="Apple--iphone4">iPhone 4</option>
    <option value="Apple--iphone5">iPhone 5</option>
</select>

Meine Aufgabe ist es, Auswahlliste 2 entsprechend dem Wert anzuzeigen, den Benutzer in Auswahlliste 1 auswählen.

Wenn ein Benutzer in der ersten Auswahl Nokia auswählt, sollten in der zweiten Auswahlliste nur Lumia Telefone angezeigt werden. Wie für andere Telefone.

Wenn in Erste Auswahlliste ausgewählt ist, sollte Zweite Auswahlliste nichts anzeigen, aber immer noch ohne sichtbar sein jede Option (wie deaktivierte Schaltfläche).

Wie kann ich dies mit jQuery erreichen?

Die JSFiddle, die ich aus der obigen Auswahlliste erstellt habe.

0
user1376704 9 Dez. 2013 im 02:20

4 Antworten

Beste Antwort

Ich denke, Sie suchen:

$("#sel2").prop("disabled", true);

$( "#sel1" ).change(function() {
  var value = $(this).val();
    $("#sel2").prop("disabled", false);
    $("#sel2 > option").hide();
    $("#sel2 > option[value*='" + value +"']").show();
});

Nur ich habe ausgewählt, um die Auswahl durch Jquery einfacher zu machen. Bevor ich das Steuerelement deaktiviert habe, um eine Auswahl zu treffen, und wenn nur die erste Auswahl geändert wird, behalte ich die Option, die mit option[value*='" + value +"']" übereinstimmt.

Live-Demo hier

0
Wilfredo P 8 Dez. 2013 im 23:22

Ich würde vorschlagen:

/* select the select element whose name is "mobile-phone",
   assign an event-handler for the 'change' event:
*/
$('select[name="mobile-phone"]').change(function () {
    // get the relevant/selected brand-name:
    var brand = this.value;
    /* find the option elements inside of the select element with
       name="mobile-model", enable them all:
    */
    $('select[name="mobile-model"] option').prop('disabled', false)
    // show them all:
        .show()
    // filter the collection, to find only those whose value does not start with the brand-name:
        .filter(function () {
            return !(this.value.indexOf(brand) === 0);
        })
        // disable those elements:
        .prop('disabled', true)
        // hide them:
        .hide();
});

JS Fiddle-Demo.

Verweise:

1
David says reinstate Monica 8 Dez. 2013 im 23:41

Sie sollten zwei MySQL-Tabellen in Betracht ziehen: Marke, Modell. Die Markentabelle wäre nur eine Liste von Marken mit IDs. Die Modelltabelle würde eine Markenspalte enthalten, in die Sie diese IDs eingeben.

Anschließend sollten Sie eine JSON-Abfrage für die ausgewählte Marke durchführen und eine entsprechende Auswahlliste zurückgeben.

Auf diese Weise verfügen Sie über eine detaillierte Datenbank, die Sie auf vielfältige Weise aufrufen und bearbeiten können.

Alternativ können Sie Folgendes tun:

$(".mobile-phone").on("change", function(){
  var brand = $(this).val();
  $("[data-brand]").hide();
  $("[data-brand="+brand+"]").show();
});

Und mach das:

<option data-brand="Nokia" value="...
-1
rybo111 8 Dez. 2013 im 22:32

Es gibt ein jQuery-Plugin, das genau diesen Fall sehr gut behandelt: http://www.appelsiini.net/projects/ angekettet.

0
DirkR 15 Juli 2016 im 10:48