Заполнение выбранного значения в выберите из нажмите div и применить класс

Question

Заполнение выбранного значения в выберите из нажмите div и применить класс

0

У меня есть таблица ценообразования с тремя параметрами и раскрывающимся списком выбора, заполненным тремя параметрами цены - чтобы выбрать план, пользователь может либо выбрать из списка выбора, либо выбрать соответствующую таблицу.

В тот момент, когда пользователь нажимает на соответствующую таблицу, я могу получить выбор для заполнения с правильным значением, но я не могу применить класс (.plan_chosen) к таблице, поэтому очевидно, какой из них выбирается каждый раз, когда он выбран.

Также, если кто-то выбирает непосредственно из выбора, то как я могу применить тот же класс к таблице, чтобы снова узнать, что выбрано?

$(function() {
    $('.pricing-table').click(function() {
        var choice=$(this).attr('id');
        $('#plan').val(choice);
        $('#choice').addClass('plan_chosen');
    });
});

<div class="pt">
    <ul class="pricing-table green" id="Core">
        <li class="plan">Core</li>
        <li class="sign-up"><a href="#">Select</a></li>
    </ul>

    <ul class="pricing-table green" id="Professional">
        <li class="extra-info">POPULAR</li>
        <li class="sign-up"><a href="#">Select</a></li>
    </ul>

    <ul class="pricing-table green" id="Enterprise">
        <li class="plan">Enterprise</li>
        <li class="sign-up"><a href="#">Select</a></li>
    </ul>       
</div>

<div class="select-group focus">
    <label>Plan</label>
    <div class="select">
        <select name="plan" id="plan" class="req">
            <option>Choose a plan</option>
            <option>Core</option>
            <option>Professional</option>
            <option>Enterprise</option>
        </select>
    </div>  
</div>

скрипка

bhttoan 30 март 2014, в 18:34

Источник

Теги:

jquery

css

html-select

2 ответа

1

Сменить скрипт на

$(function() {
    $('.pricing-table').click(function() {
        var choice=$(this).attr('id');
        $('#plan').val(choice);
        $('.pt ul').removeClass('plan_chosen');
        $('#'+choice).addClass('plan_chosen');
    });

    $('#plan').change(function(){
        $('.pt ul').removeClass('plan_chosen');
        $('#'+ $(this).find(":selected").text()).addClass('plan_chosen');
    });
});

Вот это Скрипт.

Вы должны изменить $('#choice') на $('#'+choice)
Вы должны удалить класс из предыдущего элемента

Farhad Jabiyev 30 март 2014, в 12:58

Ещё вопросы

Arun P Johny · Accepted Answer · 2014-03-30T13-08-00.000Z

Пытаться

$(function () {
    function select(choice) {
        $('#plan').val(choice);
        $tables.removeClass('plan_chosen');
        $('#' + choice).addClass('plan_chosen');
    }

    var $tables = $('.pricing-table').click(function () {
        var choice = this.id;
        select(this.id)
    });
    $('#plan').change(function () {
        select(this.value)
    })
});

Демо: скрипка

вам нужно использовать choice как переменную и использовать его для конкатенации строк
вам нужно удалить класс plan_chosen из ранее выбранного элемента
вам нужно иметь обработчик изменений для выбора, который будет делать то же самое

Выбрал это как правильный ответ, поскольку он отвечал обоим требованиям - спасибо