どのようにしてonClickの代わりにこのjavascriptをトリガーするためにドロップダウン選択ボックスを使用できますか？

Question

私は現在、このJSをページの一番下に配置しています。これにより、ユーザーは要素がタグ付けされているさまざまな属性によってクラス「grid-product-box」を持つ要素を並べ替えることができます。

私のページの上部には機能がありますが、価格（低価格）、ID（#pricelh、#productnameなど）を持っていて、次のような機能があります。

クリックの代わりにこれをトリガーするドロップダウン選択を作成するにはどうすればよいですか？オプションがドロップダウンから選択されるとすぐに、または「ソート」ボタンをクリックした後に、それが可能になります。

私はonChangeハンドラで遊んでいますが、スクリプトを壊すだけです。

<SCRIPT> 
var t; 
    (function($) { 

     $("#pricelh").click(function() { 
      $(".grid-product-box").qsort({attr: "productprice", digits: true}); 
     }); 
     $("#pricehl").click(function() { 
      $(".grid-product-box").qsort({attr: "productprice", digits: true, order: "desc"}); 
     }); 
     $("#productname").click(function() { 
      $(".grid-product-box").qsort({attr: "productname", ignoreCase: true}); 
     }); 
     $("#manufacturername").click(function() { 
      $(".grid-product-box").qsort({attr: "manufacturername", ignoreCase: true}); 
     }); 
     $("#sortOptions").click(function() { 
      clearTimeout(t); 
      $("#selectList option:gt(0)").qsort(); 
      showSortMessage(); 
     }); 
     $("#sortOptionsDesc").click(function() { 
      clearTimeout(t); 
      $("#selectList option:gt(0)").qsort({order: "desc"});   
      showSortMessage(); 
     }); 
    })(jQuery); 
</SCRIPT> 

Answer 1

を使用することができると思うselect onchange

Answer 2

<select id="selecteditem" onchange="[javascript here]"> 

これは動作します、あなたはidを使用してselect valueを得ることができます。

たぶん、あなたはあなたの選択ボックスを想定すると、この

Answer 3

$("#selectbox").change(function() { 
if($(this).val() == 'pricelh') { 
    $(".grid-product-box").qsort({attr: "productprice", digits: true}); 
    }); 
} else if($(this).val() == 'pricehl') { 
    $(".grid-product-box").qsort({attr: "productprice", digits: true, order: "desc"}); 
    }); 
} 
// other functions 
}); 

の使用と間違っていたものを投稿すると、このようなものです：

<select id="sortOptions"> 
    <option value="productprice">Price</option> 
    <option value="productprice_desc">Price descending</option> 
    <option value="productname">Name</option> 
    <option value="manufacturername">Manufacturer</option> 
</select> 

あなたがマップを作成することができますこれらの値をソート設定にマップします。

var sort_options = { 
    productprice: {attr: "productprice", digits: true}, 
    productprice_desc: {attr: "productprice", digits: true, order: "desc"}, 
    productname: {attr: "productname", ignoreCase: true}, 
    manufacturername: {attr: "manufacturername", ignoreCase: true} 
}; 

その後、イベントハンドラは次のようになります。

$('#sortOptions').change(function() { 
    $(".grid-product-box").qsort(sort_options[this.value]); 
});