Strictly this is a jQuery question rather than a Dancer question, but:

Assuming you’re making an ajax request to get the data, where data is of the form

[['kidney',1],['liver',2],['noggin',3]]

I’m assuming this structure because this is what your template expects – then you could achieve this by code in the success function in your $.ajax call along the lines of:

  var selectElement = $('select[name="tissue"]').first().empty();

  $.map(data, function(tissue){

    selectElement.append( $('<option/>').attr('value',tissue[1]).text(tissue[0]))

  } );

In live production code you would probably want to use a better selector for the select element in case you have multiple panels.

… however, if the tabs control the contents of the form, are you sure your form belongs outside the tabs and not inside them?

Daniel

From: dancer-users [mailto:dancer-users-bounces@dancer.pm] On Behalf Of Wanjuan Yang
Sent: 23 March 2016 16:40
To: Perl Dancer users mailing list
Subject: Re: [dancer-users] how to change drop down list on different tabs

From: dancer-users <dancer-users-bounces@dancer.pm> on behalf of "John J. McDermott, CPLP" <jjm@jkintl.com>
Reply-To: Perl Dancer users mailing list <dancer-users@dancer.pm>
Date: Tuesday, March 22, 2016 at 5:38 PM
To: "dancer-users@dancer.pm" <dancer-users@dancer.pm>
Subject: Re: [dancer-users] how to change drop down list on different tabs

Changing the drop down can be done most easily client-side. Therefore, I'd use jQuery to switch tabs and change the drop down.

--john

I am able to get the data needed, but how to use jQuery to update the drop down, I.e. The option element in the template?

It is a list, not a single value.

Can anybody give me a hint please?

Many thanks,

Wendy

On 3/22/2016 11:08 AM, Wanjuan Yang wrote:

Hi,

I have a template:

The first part is a form with a drop down list.

The second part of the template consists different tabs.

By selecting from the list, it shows different content in the second part of the template.

But I want to change the drop down list content when switch between tabs. How can I do it?

The simplified version of the codes look like:

  <div class="panel">

    <h3 >Select a tissue specific analysis: </h3>  

    <div class="filt_options">

       <form action=“/someaction/&" method="post" autocomplete="off">

           <select name="tissue" class="tissue_selector">

                 <?pl foreach my $tissue ( @$tissues ){ ?>

                    <option value="[== $tissue->[1] =]"> [== $tissue->[0] =]</option>

               <?pl } ?>

        </select>

    </form>

    </div>

   <div class="sub_data" id="tissue_selection”>

       <ul class="tabs">

          <li><a href="#t_first">Overview</a></li>

         <li><a href=“#t_second”>Plot</a></li>

     </ul>

  <div id="t_first" class=“overview”>

  </div>

  <div id=“t_second” class="plot">

  </div>

</div>

</div>

Many thanks,

Wendy

_______________________________________________
dancer-users mailing list
dancer-users@dancer.pmhttp://lists.preshweb.co.uk/mailman/listinfo/dancer-users

--
John J. McDermott, CPLP
Learning and Performance Consultant
jjm at jkintl.com 575/737-8556
Check out my security blog posts
Add an A for the Arts To STEM and get STEAM and a strong engine to move forward.