2016-09-08 20 views
0

Jiren filter libraryを使用してJSONデータをフィルタリングします。 フィルタ条件を使用すると、selectの未使用オプションを無効にしたいと考えています。JSONデータに基づいて選択オプションを無効にする

例:私の結果では、「Silversea Expedition」というクルーズタイプはありません。このオプションをフィルタで無効にします。

ここでは、「私のコード(S)

HTML:

<div class="well"> 
       <fieldset id="cruiseType_criteria"> 
        <legend>Cruise Type</legend> 
        <select class="form-control" id="type_filter" role="listbox"> 
         <option value="all">All</option> 
         <option value="Silversea Classic">Cruise</option> 
         <option value="Silversea Expedition">Expedition</option> 
        </select> 
       </fieldset> 
      </div> 

JSONオブジェクト:

{ 
    "id": 23, 
    "Destination": "Mediterranean", 
    "DestinationID": "263960e8-9eaa-4ab0-a040-25bdf94479ee", 
    "DepartureDate": "2016-02-09T04:45:01 -01:00", 
    "Ship": "Explorer", 
    "ShipID": "8b7571a9-1a73-40c3-916f-27b3981167d1", 
    "CruiseType": "Silversea Classic", 
    "Duration": 13, 
    "AllInclusive": true, 
    "WaitList": false, 
    "FareFrom": 5434, 
    "Currency": "$", 
    "Cities": [ 
     "ad", 
     "magna", 
     "dolore", 
     "quis", 
     "magna", 
     "sint", 
     "consequat", 
     "nostrud", 
     "amet", 
     "fugiat", 
     "proident", 
     "aliqua" 
    ], 
    "VoyageCode": "{{integer(100, 9999)}", 
    "Features": [ 
     { 
     "id": 0, 
     "name": "Diving" 
     }, 
     { 
     "id": 1, 
     "name": "Wellness" 
     } 
    ], 
    "url": "silversea.com" 
    }, 

Screenshot

は、事前にありがとう

答えて

0

あなたのjsonデータがjsonObjであり、CruiseTypeが配列であると考えてください。

var cruiseType= jsonObj.cruseType; 
$("#type_filter").each(function() 
     { 
      // checking if option is present in cruiseType array or not 
      if(jQuery.inArray($(this).val(), cruiseType) == -1){ 
       $(this).prop('disabled', true); 
      } 
     }); 

上記のコードはjsonObjからCruiseTypeに存在しないオプションにdisbled=trueを追加します。

+0

ヘルプが必要な場合はお知らせください – Abhijeet

+0

コントロールを無効にするオプションではありません。あなたがコードを_afterFilter_ varに入れるのは、データをフィルタリングするときに使われるからです。 var afterFilter = function(result){ $( '#total_cruises')。テキスト(result.length); var cruiseType = result.CruiseType; $( "#type_filter")。each(function() { // cruiseType配列にオプションが存在するかどうかを調べる if(jQuery.inArray($(this).val()、cruiseType)== - 1){ $(this).prop( 'disabled'、true); } }); } ありがとうございます –

+0

私はオプションの無効を探してお知らせします – Abhijeet

関連する問題