0

選択ボックスから3つの機能を選択した後、jquery/javascriptを使用して複数のクラスでリストをフィルタリングしています。現在、3 つの基準をすべて満たすものを表示し、残りをページの別の div に配置しています。

3 つの条件すべてに一致する項目だけでなく、2 つまたは 1 つの条件にも一致する項目を表示する方法があるかどうか疑問に思っています。条件を満たさない場合は、リストの一番下などに表示されます。

jquery/javascriptを使用してこのようなことを行う方法についての提案を完全にオープンにしています。

<form id="keys" action="results.html">
<select id="key1">
<option id="Android">Android</option>
<option id="Bluetooth">Bluetooth</option>
<option id="Camera">Camera</option>
<option id="Smartactions">Smartactions</option>
<option id="Video">Video</option>
<option id="Cat">Meow</option>
</select>

<select id="key2">
<option id="Android">Android</option>
<option id="Bluetooth">Bluetooth</option>
<option id="Camera">Camera</option>
<option id="Smartactions">Smartactions</option>
<option id="Video">Video</option>
</select>

<select id="key3">
<option id="Android">Android</option>
<option id="Bluetooth">Bluetooth</option>
<option id="Camera">Camera</option>
<option id="Smartactions">Smartactions</option>
<option id="Video">Video</option>
</select>
</form>
<button id="submit" onclick="showList()">Submit</button>

<div id="results">
<ul>
<li class="Bluetooth Camera" style="display:none">DEFY PRO</li>
<li class="Bluetooth Camera Smartactions" style="display:none">Motorola RAZR V</li>
<li class="Bluetooth Camera Smartactions" style="display:none">ATRIX HD LTE</li>
<li class="Android Bluetooth Camera Smartactions Video" style="display:none">Motorola RAZR</li>
<li class="Bluetooth Camera Video" style="display:none">MOTO LUXE</li>
</ul>
</div>

<div id="rest_results">

</div>

そして私のスクリプト

function showList() {

    var key1 = keys.key1.value;
    var key2 = keys.key2.value;
    var key3 = keys.key3.value;

    var filter = $("." + key1 + "." + key2 + "." + key3 + "");
    filter.show();

    if (filter.length == 0) {
        alert("There is nothing that matches your criteria");   
    }

    var rest = $('li').not(filter);
    rest.show().appendTo("#rest_results");
}

そしてフィドル

4

1 に答える 1

0

要素の ID は一意である必要があります。

data-*その代わりに属性を使用できます。

天気はわかりませんが、更新されたコードは次のとおりです。選択できる基準は 1 つ、2 つ、または 3 つだけです。

HTML

<form id="keys" action="results.html">
  <select id="key1">
      <option></option>
      <option data-filter="Android">Android</option>
      <option data-filter="Bluetooth">Bluetooth</option>
      <option data-filter="Camera">Camera</option>
      <option data-filter="Smartactions">Smartactions</option>
      <option data-filter="Video">Video</option>
      <option data-filter="Cat">Meow</option>
  </select>

  <select id="key2">
      <option></option>
      <option data-filter="Android">Android</option>
      <option data-filter="Bluetooth">Bluetooth</option>
      <option data-filter="Camera">Camera</option>
      <option data-filter="Smartactions">Smartactions</option>
      <option data-filter="Video">Video</option>
  </select>

  <select id="key3">
      <option></option>
      <option data-filter="Android">Android</option>
      <option data-filter="Bluetooth">Bluetooth</option>
      <option data-filter="Camera">Camera</option>
      <option data-filter="Smartactions">Smartactions</option>
      <option data-filter="Video">Video</option>
  </select>
</form>
<button id="submit" onclick="showList()">Submit</button>

<br>
<div id="results">
<ul>
    <li class="Bluetooth Camera" style="display:none">DEFY PRO</li>
    <li class="Bluetooth Camera Smartactions" style="display:none">Motorola RAZR V</li>
    <li class="Bluetooth Camera Smartactions" style="display:none">ATRIX HD LTE</li>
    <li class="Android Bluetooth Camera Smartactions Video" style="display:none">Motorola RAZR</li>
    <li class="Bluetooth Camera Video" style="display:none">MOTO LUXE</li>
</ul>
</div>

<br>
<div id="rest_results">


</div>

JAVASCRIPT

function showList() {

    var key1 = $("#key1").find(":selected").data("filter");
    var key2 = $("#key2").find(":selected").data("filter");
    var key3 = $("#key3").find(":selected").data("filter");
    var selectorArr = [];
    var selector;

    if (typeof key1 !== "undefined")
        selectorArr.push("."+key1);
    if (typeof key2 !== "undefined")
        selectorArr.push("."+key2);
    if (typeof key3 !== "undefined")
        selectorArr.push("."+key3);
    selector = selectorArr.join(", ");

    if (selector != "") {
       var filter = $(selector);
       if (filter.length == 0)
           alert("There is no match with your criteria!");
       filter.show();
       var rest = $('li').not(selector);
       $("#rest_results").html("<b>Rest of the results</b>");
       rest.clone().show().appendTo("#rest_results");
    }
    else {
       alert("You must select at least one criteria!");  
    }

}

ここに更新された jsFiddle DEMO があります。

于 2012-11-14T23:11:29.303 に答える