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>

所以点击按钮：nth-of-type（1）应该预先选择选项：nth-of-type（1），依此类推。

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

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

使用ACF和使用联系表格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()，然后使用option选择使用eq()的关联prop()，然后再使用$('button').click(function() { $('select option').eq($(this).index('button')).prop('selected', true); });选择该选项。试试这个：

＆＃13;

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

＆＃13;

//This is FragmentA and it adds FragmentB
 fragmentManager = getSupportFragmentManager();
            fragmentTransaction = fragmentManager.beginTransaction();
            fragmentTransaction.add(R.id.activity_main,new FragmentB());
            fragmentTransaction.addToBackStack(null);
            fragmentTransaction.commit();

//This is FragmentB and it adds FragmentC
FragmentManager fragmentManager = getChildFragmentManager();
            FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
            fragmentTransaction.add(R.id.publicCommunication,new FragmentC());
            fragmentTransaction.addToBackStack(null);
            fragmentTransaction.commit();

//This is FragmentC and button is available remove cuurent fragment. now here is my problem , it removes both fragmentC and FragmentB and Shows FragmentA. I want it to show FragmentC but it is not showing it shows fragmentA.
 button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                FragmentManager manager = getActivity().getSupportFragmentManager();
                 manager.popBackStackImmediate();
            }
        });

＆＃13;

Answer 2

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

Answer 3

这应该做。 ID和最终获得它的数字应该是被选中的选项。

＆＃13;

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

＆＃13;

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

＆＃13;

当前的nth-of-type选择相同的nth-of-type下拉列表

3 个答案: