Dynamic Dropdowns with charateristics & options

-- url of the page with the problem -- : 209.59.173.183/mattresses/1-sleep-pedic-hotel-firm.html?popup=1
-- HikaShop version -- : 2.3.0
-- Joomla version -- : 3.2.2
-- PHP version -- : x.x.x
-- Browser(s) name and version -- : XXXXX x.x.x
-- Error-message(debug-mod must be tuned on) -- : Error_message

I am trying to create a dynamic dropdown with my product options and characteristics dropdown. Here are both of my dropdowns below.

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>

Hi Josh,

I guess you should try to execute your js function at the page load.
You could put your code in a function, give it a name, and call it when the page load with the right option.
Something like this:

productcharacteristics.change(myDropdownFunction());

function myDropdownFunction() {
    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();
    }
};

Hi, i updated your code in js fiddle with with the code you suggested below, but now the js does not work at all any ideas. All of the dropdowns show all the time. Also, maybe I am a little confused what would you put in the view file? are you talking about in my show_default.php file for the product page? Also, how would i go about calling the function. I am by no means a javascript expert.

Thanks,

Josh

Alright, then here is a way easier solution:

Just make every option like this one except the "Twin" ones.

<option value="776" style="display:none;"> Full ( + 
	
	$39.99 
 )</option>

Hi where would I go to add the display:none? These options are added on the fly in php so how would i add display=none? This is essentially what the javascript does that I sent you earlier only it will not work when the page loads.

Also, this solution would not work because there are times where there may be no twin mattresses and the default option is full, queen, or king instead so i see a javascript solution like i posted above being the only option.

My bad, i kind of forget that point.
So back to the first solution. What you can do is modify the view.html.php file of product to load your js.
It must be added in the form() function like this:

$js = 'yourcode';
$doc = JFactory::getDocument();
$doc->addScriptDeclaration($js);

<script language="javascript" type="text/javascript">myDropdownFunction(nameOfTheFirstItem);</script>

Hi, this does not seem to work at all. I tried added this code below inside view.html.php and it does not seem to work I do not know if there is a snytax error or what in the code you gave me? All I get is a Parse error: syntax error, unexpected T_VARIABLE, expecting T_FUNCTION

productcharacteristics.change(myDropdownFunction());

function myDropdownFunction() {
    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();
    }
};

I think I may have come up with another solution that my work as well. How can I add unique classes to each of the options under each dropdown characteristics for the options?? I have been looking inside of the options.php file but have not been able to get this to work.

Right now the charcteristics are <option value="700">. But i would like it to be like this
<option value ="700" class="option1">
<option value ="701" class="option2">

I would like to use the word option along with the variants id as the "class" name for the option.

so I know it would be class="option $variant->product_id" but I have no idea how or where to implement this in the code.

I have been trying to figure this out for the longest time. It seems the javascript is much easier if i could just have individual classes for each option value.
Thanks,

Josh

Hi, Nicolas thanks for the response, but I could not get this to work i got the following error:

Fatal error: Cannot access empty property in /xxx/xxxxx/xxxxxxx/libraries/cms/html/select.php on line 477

How can I fix this??

Hi, the error went away i changed the code like you suggested, but there is still no class showing up in the product options on the frontend

Thank you so much that worked! How would I go about doing the same thing for the characteristics options as well? I cannot seem to find the php file that contains the select code for this.

Josh