0
ソート可能な4つの選択肢を持つソート可能なリストを作成しました。考え方は、ドロップダウン・オプションを1つ選択し、他のドロップダウンと一致するものがない場合は、他のドロップダウンから消えます。その部分は完全に機能しますが、問題は「サービス」ドロップダウンがまったく機能していないように見えることです。私は自分のデータ型をチェックしていますが、少なくとも配列でなければなりません。私は何が欠けていますか？フィルタリング配列、いくつかは動作しません
ありがとうございます！
<div id="providers">
<select id="type" class="options"><option value="">Select Provider Type</option><option value='3'>Youth Empowerment Services</option><option value='2'>Child and Family Services</option><option value='4'>Intellectual or Developmental Disabilities</option><option value='5'>Substance Abuse Managed Service</option></select>
<select id="services" class="options"><option value="">Select Service Type</option><option value="111">Service A</option><option value="112">Service B</option><option value="113">Service C</option><option value="114">Service D</option><option value="115">Service E</option><option value="116">Service F</option><option value="117">Service G</option><option value="118">Service H</option><option value="119">Service I</option></select>
<select id="location" class="options"><option value="">Select Location Type</option><option value="201">Location A</option><option value="202">Location B</option><option value="203">Location C</option></select>
<select id="language" class="options"><option value="">Select Language Type</option><option value='17'>Spanish</option><option value='18'>Vietnamese</option><option value='16'>English</option></select>
<button id="reset-search">Reset Filter</button>
<ul id="results" class="list">
<li class="card" data-type="[5]" data-service="[117, 118, 119]" data-location="[201, 201, 201]" data-language="[16]">
<h1>Provider C</h1>
<strong>Provider Type:</strong> <br />
<a href="http://taxonomytest.dev/provider_type/substance-abuse-managed-service/" rel="tag">Substance Abuse Managed Service</a><br /><br />
<strong>Language:</strong><br />
<a href="http://taxonomytest.dev/language/english/" rel="tag">English</a><br /><br />
<strong>Services:</strong><br />
<ins>Service G</ins><br />
Location A<br /><br />
<ins>Service H</ins><br />
Location A<br /><br />
<ins>Service I</ins><br />
Location A<br /><br />
</li>
<li class="card" data-type="[4]" data-service="[114, 115, 116]" data-location="[201, 202, 203]" data-language="[16, 17]">
<h1>Provider B</h1>
<strong>Provider Type:</strong> <br />
<a href="http://taxonomytest.dev/provider_type/intellectual-or-developmental-disabilities/" rel="tag">Intellectual or Developmental Disabilities</a><br /><br />
<strong>Language:</strong><br />
<a href="http://taxonomytest.dev/language/english/" rel="tag">English</a>, <a href="http://taxonomytest.dev/language/spanish/" rel="tag">Spanish</a><br /><br />
<strong>Services:</strong><br />
<ins>Service D</ins><br />
Location A<br /><br />
<ins>Service E</ins><br />
Location B<br /><br />
<ins>Service F</ins><br />
Location C<br /><br />
</li>
<li class="card" data-type="[2]" data-service="[111, 112, 113]" data-location="[201, 202, 203]" data-language="[16, 18]">
<h1>Provider A</h1>
<strong>Provider Type:</strong> <br />
<a href="http://taxonomytest.dev/provider_type/child-and-family-services/" rel="tag">Child and Family Services</a><br /><br />
<strong>Language:</strong><br />
<a href="http://taxonomytest.dev/language/english/" rel="tag">English</a>, <a href="http://taxonomytest.dev/language/vietnamese/" rel="tag">Vietnamese</a><br /><br />
<strong>Services:</strong><br />
<ins>Service A</ins><br />
Location A<br /><br />
<ins>Service B</ins><br />
Location B<br /><br />
<ins>Service C</ins><br />
Location C<br /><br />
</li>
</ul>
</div>
<script>
jQuery(function($) {
$("select.options").change(function(){
var type = $('#type').val();
var services = $('#services').val();
var location = $('#location').val();
var language = $('#language').val();
type = parseInt(type);
services = parseInt(services);
location = parseInt(location);
language = parseInt(language);
if ($(".variable").length) {
$(".card.variable").hide().each(function() {
var card = $(this);
var typearray = eval($(this).attr("data-type"));
var servicesarray = eval($(this).attr("data-services"));
var locationarray = eval($(this).attr("data-location"));
var languagearray = eval($(this).attr("data-language"));
if (type) {
if (jQuery.inArray(type, typearray) != -1) {
$(card).show();
if (!$(this).hasClass("variable")) {
$(card).addClass('variable');
};
};
}
if (services) {
if (jQuery.inArray(services, servicesarray) != -1) {
$(card).show();
if (!$(this).hasClass("variable")) {
$(card).addClass('variable');
};
};
}
if (location) {
if (jQuery.inArray(location, locationarray) != -1) {
$(card).show();
if (!$(this).hasClass("variable")) {
$(card).addClass('variable');
};
};
}
if (language) {
if (jQuery.inArray(language, languagearray) != -1) {
$(card).show();
if (!$(this).hasClass("variable")) {
$(card).addClass('variable');
};
};
}
});
} else {
$(".card").hide().each(function() {
alert(services);
var card = $(this);
var typearray = eval($(this).attr("data-type"));
var servicesarray = eval($(this).attr("data-services"));
var locationarray = eval($(this).attr("data-location"));
var languagearray = eval($(this).attr("data-language"));
if (type) {
if (jQuery.inArray(type, typearray) != -1) {
$(card).show();
if (!$(this).hasClass("variable")) {
$(card).addClass('variable');
};
};
}
if (services) {
if (jQuery.inArray(services, servicesarray) != -1) {
$(card).show();
if (!$(this).hasClass("variable")) {
$(card).addClass('variable');
};
};
}
if (location) {
if (jQuery.inArray(location, locationarray) != -1) {
$(card).show();
if (!$(this).hasClass("variable")) {
$(card).addClass('variable');
};
};
}
if (language) {
if (jQuery.inArray(language, languagearray) != -1) {
$(card).show();
if (!$(this).hasClass("variable")) {
$(card).addClass('variable');
};
};
}
});
};
var itemtype= "";
var itemservices= "";
var itemlocation= "";
var itemlanguage= "";
$(".variable").each(function() {
itemtype = $(this).data('type');
itemservices = $(this).data('service');
itemlocation = $(this).data('location');
itemlanguage = $(this).data('language');
});
console.log(itemtype);
var excludetypesarray = eval(itemtype);
var excludeservicearray = eval(itemservices);
var excludelocationarray = eval(itemlocation);
var excludelanguagearray = eval(itemlanguage);
$("select.options#type option").hide().each(function() {
var checktype = $(this).val();
var checktype = parseInt(checktype);
var select = $(this);
if (jQuery.inArray(checktype, excludetypesarray) != -1) {
$(select).show();
}
});
$("select.options#services option").hide().each(function() {
var checktype = $(this).val();
var checktype = parseInt(checktype);
var select = $(this);
if (jQuery.inArray(checktype, excludeservicearray) != -1) {
$(select).show();
}
});
$("select.options#location option").hide().each(function() {
var checktype = $(this).val();
var checktype = parseInt(checktype);
var select = $(this);
if (jQuery.inArray(checktype, excludelocationarray) != -1) {
$(select).show();
}
});
$("select.options#language option").hide().each(function() {
var checktype = $(this).val();
var checktype = parseInt(checktype);
var select = $(this);
if (jQuery.inArray(checktype, excludelanguagearray) != -1) {
$(select).show();
}
});
});
$("#reset-search").on('click', function(){
$(".card").each(function() {
$(this).show();
$(this).removeClass('variable');
});
$("select.options option").each(function() {
$(this).show();
});
});
});
</script>