> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Display dependent variants as select lists

> How to output dependent variants in WEBSALE V8s as drop-down lists, either ready-made via PR-DepVariationList or built yourself via PR-DepVariationOption.

![20171215 Abhaengige Varianten Ohne Preise](https://mintcdn.com/websaleag-44ee7ea6/Dgb_SNFMeC9HkKBV/images/20171215_abhaengige-varianten-ohne-preise.png?fit=max\&auto=format\&n=Dgb_SNFMeC9HkKBV\&q=85\&s=399f6a8a6fa75d78a3dffe693c552adf)

On the product detail view, you output dependent variants via the tags `PR-DepVariationList1` through `PR-DepVariationList200` and `PR-DepVariationName1` through `PR-DepVariationName200`. This display has no quantity limit and is therefore also suitable for products with many variants.

All tags must be placed inside a `<form>` element. The reason lies in the workflow: when the customer selects a value, that value is submitted so that WEBSALE V8s can determine the next dependent variant from it. Without a surrounding form, the selection would never reach the shop.

There are two ways to build the lists themselves.

| Way | Tag | Useful when |
| - | - | - |
| ready-made select list | `PR-DepVariationList` | the styling via the styles for products is sufficient |
| custom-built select list | `PR-DepVariationOption` | you need custom markup or want to display additional product data |

## Use the ready-made select list

The shortest route. For each variant, you output the name and the ready-made select list, wrapped in the bracket of the same name. This ensures that only the variants actually available for this product appear.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-Product~" method="post">
  {PR-DepVariationName1}
    ~PR-DepVariationName1~
    ~PR-DepVariationList1~
  {/PR-DepVariationName1}

  {PR-DepVariationName2}
    ~PR-DepVariationName2~
    ~PR-DepVariationList2~
  {/PR-DepVariationName2}
  ...
</form>
```

You then determine the appearance via the styles for products.

Reference: Styles for products&#x20;

## Build the select list yourself

If the ready-made list is not enough, you build the `select` element yourself and fill it with `PR-DepVariationOption1` through `PR-DepVariationOption200`. This gives you full control over markup and CSS.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-Product~" method="post">
  {PR-DepVariationName1}
    <select class="select_dep_variations" onchange="SubmitSelection();" size="1" name="~PR-DepVariationOptionInput1~">
      {@PR-DepVariationOption1}
        <option value="~PR-DepVariationOption1~" {PR-DepVariationOptionSelected1}selected{/PR-DepVariationOptionSelected1}>~PR-DepVariationOption1~</option>
      {/@PR-DepVariationOption1}
    </select>
  {/PR-DepVariationName1}
</form>
```

Three components carry the structure. The loop `@PR-DepVariationOption1` iterates over all values of this variant. The bracket `PR-DepVariationOptionSelected1` sets the `selected` attribute exactly on the value the customer previously chose so that the list does not jump back after submission. The field name comes from `PR-DepVariationOptionInput1`, which the shop uses to assign the submitted value to the correct variant.

The `onchange` triggers the submission as soon as the customer selects something. This way, the customer does not need to press an additional button.

## Display product data in the select list

![20171211 Abh Varianten Preis](https://mintcdn.com/websaleag-44ee7ea6/Dgb_SNFMeC9HkKBV/images/20171211_abh-varianten-preis.png?fit=max\&auto=format\&n=Dgb_SNFMeC9HkKBV\&q=85\&s=8c30c3e75c234366b056760c7075574b)

If the select list should already show the price of the respective variant, you need the custom-built approach. The tag `PR-LoadDepVariationOptionProduct` loads the product data for the respective entry, as if the customer had already chosen this option. Within the bracket, any product data fields are then available to you.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PR-DepVariationName1}
    <select class="select_dep_variations" onchange="SubmitSelection();" size="1" name="~PR-DepVariationOptionInput1~">
      {@PR-DepVariationOption1}
        <option value="~PR-DepVariationOption1~" {PR-DepVariationOptionSelected1}selected{/PR-DepVariationOptionSelected1}>~PR-DepVariationOption1~
        {PR-LoadDepVariationOptionProduct} ~PR-Price~{/PR-LoadDepVariationOptionProduct}</option>
      {/@PR-DepVariationOption1}
    </select>
{/PR-DepVariationName1}
```

In the example, the price appears after each variant value. In the same way, product numbers, stock information, or custom product data fields can be shown.

## References

* Reference: PR-DepVariationList1…200
* Reference: PR-DepVariationName1…200
* Reference: PR-DepVariationOption1…200
* Reference: PR-LoadDepVariationOptionProduct
* Reference: BT-DepVariation\_OK
* Reference: ST-DepVar\_OK
* Reference: PR-DepVarQuantity

## Related topics

* Guide: Display variants
* Guide: Reload dependent variants via AJAX
* Guide: Display dependent variants as links
* Guide: Display dependent variants as a table


## Related topics

- [Display dependent variants](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-anzeigen.md)
- [Display dependent variants as a table](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-als-tabelle-darstellen.md)
- [Display dependent variants as links](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-als-links-darstellen.md)
- [Display dependent variants as a graphical view](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-als-grafische-ansicht-anzeigen.md)
- [Reload dependent variants via AJAX](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-per-ajax-nachladen.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.