Erstellen Sie Schlüssel/Wert-Paare aus dem Filtermenü - jQuery

Question

Ich habe ein Dropdown, mit dem Benutzer ihre Abfrage filtern können.

<select id="bike_category_filter" multiple="multiple"> 
    <optgroup label="Gender"> 
    <option value="Mens">Mens</option> 
    <option value="Womens">Womens</option> 
    </optgroup> 
    <optgroup label="Type"> 
    <option value="Mountain Bike">Mountain Bike</option> 
     <option value="Hybrid">Hybrid</option> 
     <option value="Road">Road</option> 
    </optgroup> 
</select> 

wähle ich die Optionen in einem Hash zu senden suchen, zum Beispiel

{ gender: 'Mens', style: ['Mountain Bike', 'Road'] } 

Also bei Klick auf Option Men || Womens i hinzufügen, dass sich mit dem Schlüssel Gender und für einen der Typen I würde gerne hinzufügen style: ['values here']

Wie würde ich so etwas erreichen, welche Methoden kann ich aus der jQuery-Bibliothek verwenden.

Jede mögliche Unterstützung geschätzt

Dank

Answer 1

Sie können dies tun:

var styles = { 
    "men": ['Mountain Bike', 'Road'], 
    "women": [...] 
}; 
$("select").change(function() { 
    var gender = $("select option:selected").val(); 
    $("your elment").addClass(styles[gender].join(" ")); 
}); 

Ich würde Ihnen empfehlen, ein Style-Objekt wie oben und setzen die Geschlechter als Schlüssel und das Array zu erstellen, wie der Wert.

Wenn eine Benutzeränderung eine Auswahl ist, wird der Rückruf change aufgerufen, und dann gibt $("select option:selected").val(); den Wert des ausgewählten Elements zurück (in unserem Fall das Geschlecht). styles ist ein Objekt, wenn Sie diese Syntax styles["men"] verwenden, erhalten Sie den Wert für den Men-Schlüssel.

Answer 2

var result = { 
 
    gender: '', 
 
    style: [] 
 
}; 
 

 
$('#bike_category_filter').change(function() { 
 
    var selected = $('option:selected', this), 
 
     val = selected.val(), 
 
     index = ''; 
 

 
    if (!val) { 
 
     return; 
 
    } 
 

 
    switch (selected.parent()[0].label) { 
 
     case 'Gender': 
 
      result.gender = val; 
 
      // reset style for selected gender 
 
      result.style = []; 
 
      break; 
 
     case 'Type': 
 
      (index = result.style.indexOf(val) === -1) 
 
       ? result.gender && result.style.push(val) 
 
       : result.style.splice(index, 1); 
 
      break; 
 
    } 
 

 
    $(this).val(result.style.concat([result.gender])); 
 
    $('code').html(JSON.stringify(result)); 
 
});

select { 
 
    height: 130px;} 
 

 
code { 
 
    display: block; 
 
    margin: 15px 0;}

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

 
<select id="bike_category_filter" multiple="multiple"> 
 
    <optgroup label="Gender"> 
 
    <option value="Mens">Mens</option> 
 
    <option value="Womens">Womens</option> 
 
    </optgroup> 
 
    <optgroup label="Type"> 
 
    <option value="Mountain Bike">Mountain Bike</option> 
 
     <option value="Hybrid">Hybrid</option> 
 
     <option value="Road">Road</option> 
 
    </optgroup> 
 
</select> 
 

 
<code></code>

Answer 3

Der grundlegende Algorithmus ist:

• jedes Mal, wenn der Benutzer/wählt deselektiert Wert:
  • result
  • für jedes auf ein leeres Objekt zurückgesetzt <optgroup> Markierung:
    • store der Wert des label Attributs in den Variablen groupName
    • für jeden <option> Tag innerhalb der <optgroup> einen neuen leeren groupSelections Array initialisieren, die durch den Benutzer ausgewählt wurden:
      • hinzufügen Wert der option bis groupSelections
    • gesetzt result[groupName] = groupSelections

Am Ende Sie eine Immobilie in result Objekt für jeden optgroup haben sollte, und jede dieser Eigenschaften sollte ein Array die Werte der ausgewählten option s Auflistung sein innerhalb dass optgroup.

Hier ist es in dem Code ein:

var result; 
 
$('#bike_category_filter').change(function() { 
 
    result = {}; 
 
    $(this).find('optgroup').each(function() { 
 
    var groupName = $(this).attr('label'); 
 
    var groupSelections = []; 
 
    $(this).find('option:selected').each(function() { 
 
     groupSelections.push($(this).val()); 
 
    }); 
 
    result[groupName] = groupSelections; 
 
    }); 
 
    $('#result').html(JSON.stringify(result)); 
 
});

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

 
<select id="bike_category_filter" multiple="multiple" style="width:150px;height:150px;"> 
 
    <optgroup label="Gender"> 
 
    <option value="Mens">Mens</option> 
 
    <option value="Womens">Womens</option> 
 
    </optgroup> 
 
    <optgroup label="Type"> 
 
    <option value="Mountain Bike">Mountain Bike</option> 
 
     <option value="Hybrid">Hybrid</option> 
 
     <option value="Road">Road</option> 
 
    </optgroup> 
 
</select> 
 

 
<p><code id="result"></code></p>