根据第一个下拉列表的选择,将初始值加载到第二个下拉列表中

时间:2014-02-17 22:47:57

标签: javascript jquery html joomla joomla-extensions

您好我正在尝试从hikashop_product_characteristic_1中的默认值加载下拉列表中的信息。根据第一个下拉列表中的默认值,我想隐藏option下拉列表中的所有其他hikashop_product_option_1

<select id="hikashop_product_characteristic_1" name="hikashop_product_characteristic[1]" class="inputbox" size="1" onchange="return hikashopUpdateVariant(this);">
    <option value="2" selected="selected">Twin</option>
    <option value="6">Full</option>
    <option value="7">Queen</option>
    <option value="8">King</option>
    <option value="9">Cal King</option>
</select>
<select id="hikashop_product_option_1" name="hikashop_product_option[1]" class="inputbox" size="1"  onchange="hikashopChangeOption();">
    <option value="0" selected="selected">No</option>
    <option value="775"> Twin ( + 

    $39.99 
 )</option>
    <option value="774"> Twin Heavy Duty ( + 

    $49.99 
 )</option>
    <option value="769"> Twin Heavy Duty Glideamatic ( + 

    $59.99 
 )</option>
    <option value="772"> Twin XL ( + 

    $39.99 
 )</option>
    <option value="771"> Twin XL Heavy Duty ( + 

    $49.99 
 )</option>
    <option value="770"> Twin XL Heavy Duty Glideamatic ( + 

    $59.99 
 )</option>
    <option value="776"> Full ( + 

    $39.99 
 )</option>
    <option value="777"> Full Heavy Duty ( + 

    $49.99 
 )</option>
    <option value="778"> Full Heavy Duty Glideamatic ( + 

    $59.99 
 )</option>
    <option value="773"> Queen ( + 

    $49.99 
 )</option>
    <option value="779"> Queen Heavy Duty ( + 

    $59.99 
 )</option>
    <option value="780"> Queen Heavy Duty Glideamatic ( + 

    $99.99 
 )</option>
    <option value="781"> King ( + 

    $59.99 
 )</option>
    <option value="782"> King Heavy Duty ( + 

    $69.99 
 )</option>
    <option value="783"> King Heavy Duty Glideamatic ( + 

    $99.99 
 )</option>
    <option value="784"> Cal King ( + 

    $59.99 
 )</option>
    <option value="785"> Cal King Heavy Duty ( + 

    $69.99 
 )</option>
    <option value="786"> Cal King Heavy Duty Glideamatic ( + 

    $99.99 
 )</option>
</select>

我已将信息放在下面。我遇到的问题是初始页面加载:它正在加载hikashop_product_option_1下的所有值,我只希望它根据hikashop_product_characteristic_1中的初始值显示值

以下是我在下面的代码:我一整天都没有成功,但是我无法使用它。

http://jsfiddle.net/HYQpj/4/

var subselectContains = {
      "Twin": [0,775,774,769], //Twin
        "Twin XL": [0,772,771,770], //Twin XL
        "Full": [0,776,777,778], //Full
        "Queen": [0,773,779,780], //Queen
        "King": [0,781,782,783], //King
        "Cal King": [0,784,785,786] //Cal King
};

var productcharacteristics = $("#hikashop_product_characteristic_1");
var solutionOptions = $("#hikashop_product_option_1 option");


productcharacteristics.change(function () {
    var visibleOptions = subselectContains[this.options[this.selectedIndex].textContent];

    if (visibleOptions.length != 0) {
        solutionOptions.hide();


        solutionOptions.each(function () {
            for (var i = 0; i <= visibleOptions.length; i++) {
                if (this.value == visibleOptions[i]) {
                    $(this).show();
                }
            }
        });
    } else {
        solutionOptions.show();
    }
});

以下是您请求的hikashopChangeOption的完整代码

<?php

/**

 * @package HikaShop for Joomla!

 * @version 2.3.0

 * @author  hikashop.com

 * @copyright   (C) 2010-2014 HIKARI SOFTWARE. All rights reserved.

 * @license GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html

 */

defined('_JEXEC') or die('Restricted access');

?><table class="hikashop_product_options_table">

<?php

            $this->setLayout('listing_price');



            $old_show_discount = $this->params->get('show_discount');

            $old_per_unit = $this->params->get('per_unit',1);

            $this->params->set('show_discount',0);

            $this->params->set('per_unit',0);

            $this->params->set('from_module','1');

            $i=0;

            $js="var hikashop_options=Array();";



            foreach($this->element->options as $optionElement){

?>

    <tr>

<?php           $this->values = array();

                $value = 0;

                $currency = hikashop_get('class.currency');

                $map = 'hikashop_product_option['.$i.']';

                $id = 'hikashop_product_option_'.$i;

                if(empty($optionElement->variants)){

                    if(!$optionElement->product_published || (!$this->config->get('show_out_of_stock',1) && $optionElement->product_quantity==0)) continue;

                    $this->values[] = JHTML::_('select.option', 0,JText::_('HIKASHOP_NO'));

                    $text = JText::_('HIKASHOP_YES');

                    $this->row =& $optionElement;

                    if(!empty($optionElement->prices) && $this->params->get('show_price')){

                        $ok = null;

                        $positive=1;

                        foreach($optionElement->prices as $k => $price){

                            if(empty($price->price_min_quantity)){

                                $ok = $price;

                                if($price->price_value<0) $positive=false;

                                break;

                            }

                        }

                        $this->row->prices = array($ok);

                        $text.=' ( '.($positive?'+ ':'').strip_tags($this->loadTemplate()).' )';



                        if($this->params->get('price_with_tax')){

                            $price = $ok->price_value_with_tax;

                        }else{

                            $price = $ok->price_value;

                        }

                        $js.="

                        hikashop_options[".(int)$optionElement->product_id."]=".(float)$price.";";

                    }

                    $this->values[] = JHTML::_('select.option', $optionElement->product_id,$text);

                }else{

                    $defaultValue=array();

                    if(isset($optionElement->characteristics) && is_array($optionElement->characteristics) && count($optionElement->characteristics)){

                        foreach($optionElement->characteristics as $char){

                                $defaultValue[]=$char->characteristic_id;

                        }

                    }



                    foreach($optionElement->variants as $variant){

                        if(!$variant->product_published || (!$this->config->get('show_out_of_stock',1) && empty($variant->product_quantity))) continue;

                        if($variant->product_sale_start>time()) continue;

                        if($variant->product_sale_end!='' && $variant->product_sale_end!='0' && $variant->product_sale_end<time()) continue;

                        if(empty($variant->variant_name)){

                            if(empty($variant->characteristics_text)){

                                $text = $variant->product_name;

                            }else{

                                $text = $variant->characteristics_text;

                            }

                        }else{

                            $text = $variant->variant_name;

                        }

                        $this->row =& $variant;



                        if(!empty($variant->prices) && $this->params->get('show_price')){

                            $ok = null;

                            $positive=1;

                            foreach($variant->prices as $k => $price){

                                if(empty($price->price_min_quantity)){

                                    $ok = $price;

                                    if($price->price_value<0) $positive=false;

                                    break;

                                }

                            }

                            $this->row->prices = array($ok);

                            $text.=' ( '.($positive?'+ ':'').strip_tags($this->loadTemplate()).' )';



                            if($this->params->get('price_with_tax')){

                                $price = $ok->price_value_with_tax;

                            }else{

                                $price = $ok->price_value;

                            }

                            $js.="

                            hikashop_options[".(int)$variant->product_id."]=".(float)$price.";";

                        }



                        if($defaultValue && isset($variant->characteristics) && is_array($variant->characteristics) && count($variant->characteristics)){

                            $default = true;

                            foreach($variant->characteristics as $char){

                                if(!in_array($char->characteristic_id,$defaultValue)){

                                    $default = false;

                                }

                            }

                            if($default){

                                $value = $variant->product_id;

                            }

                        }

                        $this->values[] = JHTML::_('select.option', $variant->product_id,$text);

                    }

                }

                if(!count($this->values)) continue;

                $html = JHTML::_('select.genericlist', $this->values, $map, 'class="inputbox" size="1"  onchange="hikashopChangeOption();"', 'value', 'text', (int)$value,$id );

                if(!empty($optionElement->variants)){

                    $optionInfo =& $optionElement->main;

                }else{

                    $optionInfo =& $optionElement;

                }

                $options='';

                if(!empty($optionInfo->product_description) || !empty($optionInfo->product_url)){

                    $options='<img src="'.HIKASHOP_IMAGES.'info.png" alt="Information"/>';

                    $description = '';

                    if(!empty($optionInfo->product_description)){

                        $description = $this->escape(strip_tags(JHTML::_('content.prepare',$optionInfo->product_description)));

                        $options='<span class="hikashop_option_info" title="'.$description.'">'.$options.'</span>';

                    }

                    if(!empty($optionInfo->product_url)){

                        JHTML::_('behavior.modal');

                        if(empty($description)){

                            $description = $optionInfo->product_name;

                        }

                        $options='<a class="hikashop_option_info_link modal" rel="{handler: \'iframe\', size: {x: 450, y: 480}}" title="'.$description.'" href="'.$optionInfo->product_url.'">'.$options.'</a>';

                    }

                }

                    $html='<span class="hikashop_option_name" >'.$optionInfo->product_name.$options.'</span></td><td>'.$html;

?>

        <td>

            <?php echo $html; ?>

        </td>

    </tr>

                <?php $i++;

            }



            global $Itemid;

            $url_itemid='';

            if(!empty($Itemid)){

                $url_itemid='&Itemid='.$Itemid;

            }

            $baseUrl = hikashop_completeLink('product&task=price',true,true);

            if(strpos($baseUrl,'?')!==false){

                $baseUrl.='&';

            }else{

                $baseUrl.='?';

            }

            $js = $js. "

            function hikashopChangeOption(){

                var j = 0;

                total_option_price = 0;

                while(true){

                    var option = document.getElementById('hikashop_product_option_'+j);

                    if(!option){

                        break;

                    }

                    j++;

                    var option_price = hikashop_options[option.value];

                    if(option_price){

                        total_option_price+=option_price;

                    }

                }



                var arr = new Array();

                arr = document.getElementsByName('hikashop_price_product');

                for(var i = 0; i < arr.length; i++){

                    var obj = document.getElementsByName('hikashop_price_product').item(i);

                    var id_price = 'hikashop_price_product_' + obj.value;

                    var id_price_with_options = 'hikashop_price_product_with_options_' + obj.value;

                    var price = document.getElementById(id_price);

                    var price_with_options = document.getElementById(id_price_with_options);

                    if(price && price_with_options){

                        price_with_options.value = parseFloat(price.value) + total_option_price;

                    }

                }

                hikashopRefreshOptionPrice();

            }



            function hikashopRefreshOptionPrice(){

                var price_div = document.getElementById('hikashop_product_id_main');

                var inputs = price_div.getElementsByTagName('input');

                if(inputs[0]){

                    var id_price_with_options = 'hikashop_price_product_with_options_' + inputs[0].value;

                    var price_with_options = document.getElementById(id_price_with_options);

                    if(price_with_options){

                        try{

                            new Ajax('".$baseUrl."price='+price_with_options.value+'".$url_itemid."',  { method: 'get', onComplete: function(result) { var totalPrice = window.document.getElementById('hikashop_product_price_with_options_main'); if(totalPrice) totalPrice.innerHTML = result;}}).request();

                        }catch(err){

                            new Request({url:'".$baseUrl."price='+price_with_options.value+'".$url_itemid."', method: 'get', onComplete: function(result) { var totalPrice = window.document.getElementById('hikashop_product_price_with_options_main'); if(totalPrice) totalPrice.innerHTML = result;}}).send();

                        }

                    }



                }

            }

            window.addEvent('domready', function() { hikashopChangeOption(); });

            ";

            if (!HIKASHOP_PHP5) {

                $doc =& JFactory::getDocument();

            }else{

                $doc = JFactory::getDocument();

            }

            $doc->addScriptDeclaration("\n<!--\n".$js."\n//-->\n");

            $this->params->set('show_discount',$old_show_discount);

            $this->params->set('per_unit',$old_per_unit);

            $this->params->set('from_module','');

            ?>

</table>

以下是您在html中请求的产品变体的代码:

    function hikashopUpdateVariant(obj){
        var options = ['1'];
        var len = options.length;
        var selection = '';
        var found=false;
        try { obj.blur(); } catch(e){}
        if(obj.type=='radio'){
            var form = document['hikashop_product_form'];
            if(form){
                for (var i = 0; i < len; i++){
                    var checkFields = form.elements['hikashop_product_characteristic['+options[i]+']'];
                    if(checkFields){
                        if(!checkFields.length && checkFields.value){
                            selection = selection + '_' + checkFields.value;
                            continue;
                        }
                        var len2 = checkFields.length;
                        for (var j = 0; j < len2; j++){
                            if(checkFields[j].checked){
                                selection = selection + '_' + checkFields[j].value;
                                found=true;
                            }
                        }
                    }
                    if(!found){
                        return true;
                    }
                }
            }
        }else{
            for (var i = 0; i < len; i++){
                selection = selection + '_' + document.getElementById('hikashop_product_characteristic_'+options[i]).value;
            }
        }

        hikashopUpdateVariantData(selection);
        return true;
    }

    function hikashopUpdateVariantData(selection){

        if(selection){
            var names = ['id','name','code','image','price','quantity','description','weight','url','width','length','height','contact','custom_info','files'];
            var len = names.length;
            for (var i = 0; i < len; i++){
                var el = document.getElementById('hikashop_product_'+names[i]+'_main');
                var el2 = document.getElementById('hikashop_product_'+names[i]+selection);

                if(el && el2) el.innerHTML = el2.innerHTML.replace(/_VARIANT_NAME/g, selection);
            }

            if(typeof this.window['hikashopRefreshOptionPrice'] == 'function') hikashopRefreshOptionPrice();
            if(window.Oby && window.Oby.fireAjax) window.Oby.fireAjax("hkContentChanged");
        }
        return true;
    }

// - &GT;

以下是html

中产品选项的产品代码
function hikashopChangeOption(){
                var j = 0;
                total_option_price = 0;
                while(true){
                    var option = document.getElementById('hikashop_product_option_'+j);
                    if(!option){
                        break;
                    }
                    j++;
                    var option_price = hikashop_options[option.value];
                    if(option_price){
                        total_option_price+=option_price;
                    }
                }

                var arr = new Array();
                arr = document.getElementsByName('hikashop_price_product');
                for(var i = 0; i < arr.length; i++){
                    var obj = document.getElementsByName('hikashop_price_product').item(i);
                    var id_price = 'hikashop_price_product_' + obj.value;
                    var id_price_with_options = 'hikashop_price_product_with_options_' + obj.value;
                    var price = document.getElementById(id_price);
                    var price_with_options = document.getElementById(id_price_with_options);
                    if(price && price_with_options){
                        price_with_options.value = parseFloat(price.value) + total_option_price;
                    }
                }
                hikashopRefreshOptionPrice();
            }

            function hikashopRefreshOptionPrice(){
                var price_div = document.getElementById('hikashop_product_id_main');
                var inputs = price_div.getElementsByTagName('input');
                if(inputs[0]){
                    var id_price_with_options = 'hikashop_price_product_with_options_' + inputs[0].value;
                    var price_with_options = document.getElementById(id_price_with_options);
                    if(price_with_options){
                        try{
                            new Ajax('/mattresses/product/price/tmpl-component.html?price='+price_with_options.value+'&Itemid=231',  { method: 'get', onComplete: function(result) { var totalPrice = window.document.getElementById('hikashop_product_price_with_options_main'); if(totalPrice) totalPrice.innerHTML = result;}}).request();
                        }catch(err){
                            new Request({url:'/mattresses/product/price/tmpl-component.html?price='+price_with_options.value+'&Itemid=231', method: 'get', onComplete: function(result) { var totalPrice = window.document.getElementById('hikashop_product_price_with_options_main'); if(totalPrice) totalPrice.innerHTML = result;}}).send();
                        }
                    }

                }
            }
            window.addEvent('domready', function() { hikashopChangeOption(); });

//-->

1 个答案:

答案 0 :(得分:0)

您可以将所需的值放入以逗号分隔的字符串中,作为第一个select选项的值:

<select id="hikashop_product_characteristic_1" name="hikashop_product_characteristic[1]" class="inputbox" size="1">
    <option value="0,775,774,769" selected="selected">Twin</option>
    <option value="0,772,771,770">Twin XL</option>
    <option value="0,776,777,778">Full</option>
    <option value="0,773,779,780">Queen</option>
    <option value="0,781,782,783">King</option>
    <option value="0,784,785,786">Cal King</option>
</select>

(请注意,我删除了onchange听众)。

然后,您可以添加以下功能,根据特征 select的选择,仅显示产品 select所需的选项:

function refreshProducts() {
    //get the selected value and parse it to array
    var parsedValues = $("#hikashop_product_characteristic_1").val().split(",");

    //find products select
    var selectProduct = $("#hikashop_product_option_1");

    //reset selection
    selectProduct.val(0);

    //hide all it's options
    selectProduct.find("option").css({
        display: 'none'
    });

    //go over each parsed value
    $.each(parsedValues, function (index, value) {
        //find and show an option which has it's value equals to needed value
        selectProduct.find("option[value='" + parseFloat(value) + "']").css({
            display: 'block'
        });
    });
}

最后,您应该在$(document).ready()特征 select的每次更改中调用此函数:

$(document).ready(function(){
    refreshProducts();

    //handle selection of characteristic
    $(document).on("change", "#hikashop_product_characteristic_1", function(evt){
        refreshProducts();
    });
});

这是Demo

(请注意,我从特征 onchange中移除了内联select侦听器,如果需要,您可以附加一个