Expand my Community achievements bar.

SOLVED

Show dropdown content using Sightly

Avatar

Level 5

I have a dropdown with two values that has show and hide functionality. On selection of option1, certain fields show up. On selection of option 2, another set of fields show up. 

1. How to make sure if one option is selected, another option filled data should be erased?

2. How to handle the sightly to render the filled option content only?

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Level 5

I wrote something similar to achieve this but it did not work. Below is the select dropdown node properties. I added granite:id to it.

goyalkritika_0-1700963516292.png

And added value property to its child nodes. Below is the js I'm using.

 

$(document).ready(function() {
    $("#buttontypedropdown").on("change", function() {
$("#renderhtmlforredirection, #renderhtmlforaddtocart").hide();
 
        var selectedOption = $(this).val();
 
        if (selectedOption === "redirection") {
$("#renderhtmlforredirection").show();
            $("#renderhtmlforaddtocart").val('');
        } else if ( selectedOption === "addtocart") {
$("#renderhtmlforaddtocart").show();
            $("#renderhtmlforredirection").val('');
        }
    });
    $("$buttontypedropdown").change();
})

 Where am I going wrong?

View solution in original post

2 Replies

Avatar

Community Advisor

@goyalkritika 

it has nothing to do with sightly, first achieve it with plain html and JS as follow:

Assuming you have a dropdown (<select>) with two options:

 

<select id="dropdown">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
</select>

 

And let's say you have fields related to each option, for example:

 

<div id="option1Fields">
    <!-- Fields related to Option 1 -->
    <input type="text" id="field1Option1">
    <input type="text" id="field2Option1">
    <!-- ... other fields -->
</div>

<div id="option2Fields">
    <!-- Fields related to Option 2 -->
    <input type="text" id="field1Option2">
    <input type="text" id="field2Option2">
    <!-- ... other fields -->
</div>

 

 

Here's an example using jQuery to handle the logic:

 

$(document).ready(function() {
    $('#dropdown').change(function() {
        var selectedOption = $(this).val();
        
        // Hide all fields initially
        $('#option1Fields, #option2Fields').hide();
        
        if (selectedOption === 'option1') {
            // Show fields for Option 1 and clear Option 2 fields
            $('#option1Fields').show();
            $('#field1Option2, #field2Option2').val(''); // Clear Option 2 fields
        } else if (selectedOption === 'option2') {
            // Show fields for Option 2 and clear Option 1 fields
            $('#option2Fields').show();
            $('#field1Option1, #field2Option1').val(''); // Clear Option 1 fields
        }
    });
});

 

Once you achieve it statically, you can write the templating with sightly to populate the dynamic data 

Avatar

Correct answer by
Level 5

I wrote something similar to achieve this but it did not work. Below is the select dropdown node properties. I added granite:id to it.

goyalkritika_0-1700963516292.png

And added value property to its child nodes. Below is the js I'm using.

 

$(document).ready(function() {
    $("#buttontypedropdown").on("change", function() {
$("#renderhtmlforredirection, #renderhtmlforaddtocart").hide();
 
        var selectedOption = $(this).val();
 
        if (selectedOption === "redirection") {
$("#renderhtmlforredirection").show();
            $("#renderhtmlforaddtocart").val('');
        } else if ( selectedOption === "addtocart") {
$("#renderhtmlforaddtocart").show();
            $("#renderhtmlforredirection").val('');
        }
    });
    $("$buttontypedropdown").change();
})

 Where am I going wrong?