当前第 n 个类型选择相同的第 n 个类型下拉列表

Question

我有一个按钮列表如下：

<button id="serviceModal1" data-toggle="modal" data-target="#serviceModal1" tabindex="-1">Hind 150€</button>
<button id="serviceModal2" data-toggle="modal" data-target="#serviceModal2" tabindex="-1">Hind 250€</button>

等等。

还有一个带有下拉菜单的模式中的联系表单。

<select name="menu-89" class="wpcf7-form-control wpcf7-select dropdown-menu" aria-invalid="false">
<option value="TOP 300 ettevõtet autopargi järgi">TOP 300 ettevõtet autopargi järgi</option>
<option value="TOP 300 ettevõtet autopargi järgi">TOP 300 ettevõtet autopargi järgi</option>
</select>

所以点击 button:nth-of-type(1) 应该预先选择 option:nth-of-type(1) 等等。

$('#serviceModal1').click(function () {
    $('select option:eq(1)').attr('selected', 'selected');
});

我将如何动态实现这一目标？

模态框也是使用 ACF 并使用 Contact form 7 动态创建的。这是否与下面的某些代码不起作用有关？

<?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; ?>

由于这对测试目的也没有影响：

$('button').click(function(){
    $('select.dropdown-menu option:eq(2)').attr('selected', 'selected');
});

Answer 1

为此，您可以从单击的按钮中获取index()，然后使用eq() 使用它选择关联的option，然后使用prop() 选择选项。试试这个：

$('button').click(function() {
  $('select option').eq($(this).index('button')).prop('selected', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-toggle="modal" data-target="#serviceModal1" tabindex="-1">Hind 150€</button>
<button data-toggle="modal" data-target="#serviceModal2" tabindex="-1">Hind 250€</button>

<select name="menu-89" class="wpcf7-form-control wpcf7-select dropdown-menu" aria-invalid="false">
  <option value="TOP 300 ettevõtet autopargi järgi">TOP 300 ettevõtet autopargi järgi 150€</option>
  <option value="TOP 300 ettevõtet autopargi järgi">TOP 300 ettevõtet autopargi järgi 250€</option>
</select>

Answer 2

这应该可以。 id 和最后获取它的数字应该是被选中的选项。

$("button[id^='serviceModal']").click(function () {
var num = /\d+(?=\D*$)/.exec($(this).attr('id'));
 $('select option:eq('+(num-1)+')').prop('selected', 'selected');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="serviceModal1" data-toggle="modal" data-target="#serviceModal1" tabindex="-1">Hind 150€</button>
<button id="serviceModal2" data-toggle="modal" data-target="#serviceModal2" tabindex="-1">Hind 250€</button>


<select name="menu-89" class="wpcf7-form-control wpcf7-select dropdown-menu" aria-invalid="false">
<option value="TOP 300 ettevõtet autopargi järgi">TOP 150 ettevõtet autopargi järgi</option>
<option value="TOP 300 ettevõtet autopargi järgi">TOP 250 ettevõtet autopargi järgi</option>
</select>

Answer 3

$('button[id^=serviceModal]').click(function(){
  var id= $(this).attr('id').substr(12)-1;
  $('select option:eq('+id+')').attr('selected', 'selected');
});