Переключение класса активно для элемента div и установка значения из переключаемого элемента в качестве выбранной опции из выпадающего списка - PullRequest
Новая
       6

Переключение класса активно для элемента div и установка значения из переключаемого элемента в качестве выбранной опции из выпадающего списка

1 голос
/ 20 апреля 2020

У меня есть 3 «карты подписки» на выбор пользователя. У меня возникают трудности при достижении следующего:

Когда пользователь выбирает одну из «карточек», идентификатор выбранного элемента должен динамически перемещаться / выбираться из выпадающего списка с уже существующими значениями, которые совпадают. в качестве идентификаторов «карточек».

«карточек»: 

 <div id="generic_price_table">   
        <section>
            <div class="container">
                <div class="row">

                    <div class="col-md-4">
                        <div class="generic_content clearfix" id="Monthly">
                            <div class="generic_head_price clearfix">

                                <div class="generic_head_content clearfix">
                                    <div class="head_bg"></div>
                                    <div class="head">
                                        <span>Monthly</span>
                                    </div>
                                </div>
                                <div class="generic_price_tag clearfix">    
                                    <span class="price">
                                        <span class="sign">EURO</span>
                                        <span class="currency">144</span>
                                        <span class="cent"></span>
                                        <span class="month">/MON</span>
                                    </span>
                                </div>
                            </div>                            
                            <div class="generic_feature_list">
                                <ul>
                                    <li><span>15+</span> Videos</li>
                                    <li><span></span> Teachers</li>
                                    <li><span>20+</span> Discount codes</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="generic_content clearfix" id="Yearly">
                            <div class="generic_head_price clearfix">
                                <div class="generic_head_content clearfix">
                                    <div class="head_bg"></div>
                                    <div class="head">
                                        <span>Yearly</span>
                                    </div>
                                </div>
                                <div class="generic_price_tag clearfix">    
                                    <span class="price">
                                        <span class="sign">EURO</span>
                                        <span class="currency">99</span>
                                        <span class="cent">.99</span>
                                        <span class="month">/MON</span>

                                    </span>
                                </div>
                            </div>                            
                            <div class="generic_feature_list">
                                <ul>
                                    <li><span>15+</span> Videos</li>
                                    <li><span></span> Teachers</li>
                                    <li><span>20+</span> Discount codes</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="generic_content clearfix" id="3-Month">
                            <div class="generic_head_price clearfix">
                                <div class="generic_head_content clearfix">
                                    <div class="head_bg"></div>
                                    <div class="head">
                                        <span>3-Month</span>
                                    </div>
                                </div>
                                <div class="generic_price_tag clearfix">    
                                    <span class="price">
                                        <span class="sign">EURO</span>
                                        <span class="currency">129</span>
                                        <span class="cent"></span>
                                        <span class="month">/MD.</span>
                                    </span>
                                </div>
                            </div>                            
                            <div class="generic_feature_list">
                                <ul>
                                    <li><span>15+</span> Videos</li>
                                    <li><span></span> Teachers</li>
                                    <li><span>20+</span> Discount codes</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>  
            </div>
        </section>             
        </div>

Раскрывающийся список: 

 <div class="form-group row">
       <label for="paymentplanOverview" class="col-sm-3 col-form-label col-form-label-sm fs-subtitle">Payment Plan</label>
       <div class="col-sm-9">
            <select name="paymentplanOverview" class="col-sm-12" id="paymentplanOverview" requred>
                    <option></option>
                    <option value="1">Monthly</option>
                    <option value="3">3-Month</option>
                    <option value="12">Yearly</option>
            </select>
       </div>
 </div>

И JQuery у меня есть для переключения Класс active: 

$(function(){
        $('.generic_content').click(function(){
            $('.generic_content').not(this).removeClass('active');    
            $(this).toggleClass('active');      
        });
});

Я пробовал это, и это не похоже на работу: 

$(function(){
        $('.generic_content').click(function(){
            $('.generic_content').not(this).removeClass('active');    
            $(this).toggleClass('active');

            var x = document.activeElement.id;
            var x2 = document.getElementById("paymentplanOverview");

            $('[name=paymentplanOverview] option').filter(function() { 
                return ($(this).text() == x);
            }).prop('selected', true);

        });
});

1 Ответ

1 голос
/ 20 апреля 2020

При каждом нажатии вы можете сбросить класс active перед установкой любого из generic_content делений, а также сбросить выбранный option.

Вот пример с вашим HTML and basi c CSS (Просмотр на полной странице): 

$(function() {
  $('.generic_content').click(function() {
  
    $(".active").removeClass("active")
    $(this).addClass("active")
    
    $("#paymentplanOverview option").removeAttr("selected");
    $("#paymentplanOverview option:contains(" + $(this).prop("id") + ")").attr("selected", true);
    
  })
})
.generic_content.active {
  outline: 1px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" id="generic_price_table">
  <section>
    <div class="container">
      <div class="row">

        <div class="col-md-4">
          <div class="generic_content clearfix" id="Monthly">
            <div class="generic_head_price clearfix">

              <div class="generic_head_content clearfix">
                <div class="head_bg"></div>
                <div class="head">
                  <span>Monthly</span>
                </div>
              </div>
              <div class="generic_price_tag clearfix">
                <span class="price">
                                        <span class="sign">EURO</span>
                <span class="currency">144</span>
                <span class="cent"></span>
                <span class="month">/MON</span>
                </span>
              </div>
            </div>
            <div class="generic_feature_list">
              <ul>
                <li><span>15+</span> Videos</li>
                <li><span></span> Teachers</li>
                <li><span>20+</span> Discount codes</li>
              </ul>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="generic_content clearfix" id="Yearly">
            <div class="generic_head_price clearfix">
              <div class="generic_head_content clearfix">
                <div class="head_bg"></div>
                <div class="head">
                  <span>Yearly</span>
                </div>
              </div>
              <div class="generic_price_tag clearfix">
                <span class="price">
                                        <span class="sign">EURO</span>
                <span class="currency">99</span>
                <span class="cent">.99</span>
                <span class="month">/MON</span>

                </span>
              </div>
            </div>
            <div class="generic_feature_list">
              <ul>
                <li><span>15+</span> Videos</li>
                <li><span></span> Teachers</li>
                <li><span>20+</span> Discount codes</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="generic_content clearfix" id="3-Month">
            <div class="generic_head_price clearfix">
              <div class="generic_head_content clearfix">
                <div class="head_bg"></div>
                <div class="head">
                  <span>3-Month</span>
                </div>
              </div>
              <div class="generic_price_tag clearfix">
                <span class="price">
                                        <span class="sign">EURO</span>
                <span class="currency">129</span>
                <span class="cent"></span>
                <span class="month">/MD.</span>
                </span>
              </div>
            </div>
            <div class="generic_feature_list">
              <ul>
                <li><span>15+</span> Videos</li>
                <li><span></span> Teachers</li>
                <li><span>20+</span> Discount codes</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <div class="form-group row">
    <label for="paymentplanOverview" class="col-sm-3 col-form-label col-form-label-sm fs-subtitle">Payment Plan</label>
    <div class="col-sm-9">
      <select name="paymentplanOverview" class="col-sm-12" id="paymentplanOverview" required>
        <option value=""></option>
        <option value="1">Monthly</option>
        <option value="3">3-Month</option>
        <option value="12">Yearly</option>
      </select>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...