I have a series of buttons listed below:
<button id="serviceModal1" data-toggle="modal" data-target="#serviceModal1" tabindex="-1">Price 150€</button>
<button id="serviceModal2" data-toggle="modal" data-target="#serviceModal2" tabindex="-1">Price 250€</button>
And there's a contact form inside a modal with a dropdown menu.
<select name="menu-89" class="wpcf7-form-control wpcf7-select dropdown-menu" aria-invalid="false">
<option value="TOP 300 companies by fleet">TOP 300 companies by fleet</option>
<option value="TOP 300 companies by fleet">TOP 300 companies by fleet</option>
</select>
When button:nth-of-type(1) is clicked, option:nth-of-type(1) should be pre-selected, and so on.
$('#serviceModal1').click(function () {
$('select option:eq(1)').attr('selected', 'selected');
});
How can I achieve this dynamically?
The modals are generated dynamically using ACF and Contact Form 7. Could this affect the functionality of some of the codes provided below?
<?php if( have_rows('modal','option') ):
$counter3 = 1;
while ( have_rows('modal','option') ) : the_row(); ?>
<div class="modal fade" id="serviceModal<?php echo $counter3; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="helper">
<div class="modal-dialog wide-grid">
<div class="modal-controls">
<div class="btn-next">
<span class="ion-chevron-right"></span>
</div>
<div class="btn-prev">
<span class="ion-chevron-left"></span>
</div>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="ion-close"></span></button>
<div class="modal-content">
<div class="modal-body content-inner">
<div class="flexing">
<div class="flex">
<?php the_sub_field('modal-1','option'); ?>
</div>
<div class="flex">
<?php the_sub_field('modal-2','option'); ?>
<?php the_sub_field('form','option') ;?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php $counter3++; endwhile; endif; ?>
Even for testing purposes, the following code does not trigger the expected result:
$('button').click(function(){
$('select.dropdown-menu option:eq(2)').attr('selected', 'selected');
});