十二

可筛选下拉框在Magento商城中的应用

紫月蓝骋

在Magento添加可配置产品的时候，某一属性如果选项很多，我们就要盯着下拉框一个一个扫描下去了，这样会崩溃的。我用jQuery写了个可以对属性进行筛选的方法。实现原理就是弄了个假的select选择框覆盖在上面。先看下事例图。
未进行筛选的下拉框
Magento-select
筛选后的下拉框

在app/design/adminhtml/default/default/template/cagalog/product /edit/super/config.phtml加入以下代码.
其中#simple_product_huaxing是select的id，改为你的select的iD即可

<div id="huase">
<div id="selecthuaxin"><input type="text" /></div>
</div>
<script type="text/javascript">// <![CDATA[
 jQuery("#huase").insertBefore("#simple_product_huaxing");
jQuery("#selecthuaxin input").keyup(function(){
      var inputval=jQuery(this).val();
      jQuery("#weiselect li").remove()
jQuery("#simple_product_huaxing option:contains("+inputval+")").each(function(){
            var selecton=jQuery(this).text();
            var opval=jQuery(this).val();
var li=jQuery("
 
	<li />")
li.text(selecton)
jQuery("#weiselect").append(li)
li.addClass(opval)
jQuery("#weiselect li").click(function(){
      var lion=jQuery(this).attr("class")
      var litext= jQuery(this).text()
jQuery("#simple_product_huaxing").val(lion);
 jQuery("#selecthuaxin input").val(litext)
 jQuery("#weiselect li").remove()
})
jQuery("#simple_product_huaxing").change(function(){
var selcted=jQuery("#simple_product_huaxing option:selected").text()
  jQuery("#selecthuaxin input").val(selcted)
})
jQuery("#weiselect li").hover(function(){
jQuery(this).css({background:"#2E4A99",color:"#fff"})
},function(){
jQuery(this).css({background:"#fff",color:"#000"})
} ) 
 
      });
 
})
// ]]></script>