フィルタメニューからキー/値のペアを作成する - jQuery

Question

私はユーザーが自分のクエリをフィルタリングできるドロップダウンを持っています。

<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> 

私はので、私はキーGenderでそれを追加したいオプションMen || Womensのクリック時とタイプのいずれかのために例えば

、ハッシュに

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

を選択したオプションを送信するために探していますstyle: ['values here']

jQueryライブラリからどのようなメソッドを使用すればよいでしょうか？

はどのような援助が

おかげ

を高く評価し あなたはこれを行うことができます

Answer 1

：

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

私は上記のようにスタイルオブジェクトを作成し、キー配列のように性別を設定するために、あなたをお勧めします値。

ユーザの変更が選択されたときに、changeコールバックが呼び出され、この$("select option:selected").val();は、選択された要素（ここでは性別）の値を返します。 stylesは、この構文を使用するとオブジェクトですstyles["men"]あなたはmenキーの値を取得します。

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

基本的なアルゴリズムは、次のとおり毎に空のオブジェクト

にresultリセット

• ：
  • ユーザが/を選択するたびに、値を選択解除します<optgroup>タグ：
    • 追加：変数groupName
    • におけるlabel属性の値は、ユーザにより選択された<optgroup>内の各<option>タグに新しい空groupSelectionsアレイ
    • 初期化
      • ストアoption〜groupSelections
    • は終わりresult[groupName] = groupSelections

を設定し、各optgroupためresultオブジェクトに1つの特性を有するべきであり、これらの特性の各々は、内の選択option Sの値をリストする配列であるべきですそのoptgroup。ここで

は、それがコードである：

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>