- Свързани SELECTS
12
WT форуми -> HTML / Javascript / CSS -> Свързани SELECTS
Създайте нова тема Напишете отговор 
Автор Съобщение
anonimen
Активен
Активен

Регистриран на: 11/06/2012 8:07 pm

Support: 158
Bonus: 315
Мнения: 1472
Мнение 03/09/2018 4:18 pm      Отговорете с цитат


И двата проблема се решават супер лесно.

За първия - изключваш класа от единствения елемент, който го притежава. След това добавяш класа към избрания селект. Така винаги ще поддържаш само един включен.

За втория - в самия html задаваш "включено" за селекта, който искаш да се показва по дефолт.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
teroristd
Редовен
Редовен

Регистриран на: 18/02/2010 1:50 pm

Support: 83
Bonus: 178
Мнения: 1741
Мнение 05/09/2018 10:02 am      Отговорете с цитат


anonimen написа:
И двата проблема се решават супер лесно.

За първия - изключваш класа от единствения елемент, който го притежава. След това добавяш класа към избрания селект. Така винаги ще поддържаш само един включен.

За втория - в самия html задаваш "включено" за селекта, който искаш да се показва по дефолт.


Без проверките които бях направил не открих решение на проблема.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
anonimen
Активен
Активен

Регистриран на: 11/06/2012 8:07 pm

Support: 158
Bonus: 315
Мнения: 1472
Мнение 05/09/2018 11:41 am      Отговорете с цитат


1. При смяна на опцията, първо скриваш стария субселект:

Javascript code:
$('.subselect.active').removeClass('active');

2. След това показваш новия:

Javascript code:
$('.subselect.' + data).addClass('active');

3. На дефолтовия субселект слагаш active клас по default:

HTML code:
<select class="subselect active">


Толкоз Wink
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
xlebabarov
Нов
Нов

Регистриран на: 10/11/2009 8:24 am

Support: 5
Bonus: 10
Мнения: 162
Мнение 05/09/2018 12:52 pm      Отговорете с цитат


Бях на бачкане и сега се върнах.. изглежда добре! Само където пробвах първия код и нещо нищо не изкарва подопциите въобще при смяна. Някъкви идеи? Crying or Very sad

Последната промяна е направена от xlebabarov на 05/09/2018 1:48 pm; мнението е било променяно общо 1 път
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
teroristd
Редовен
Редовен

Регистриран на: 18/02/2010 1:50 pm

Support: 83
Bonus: 178
Мнения: 1741
Мнение 05/09/2018 1:03 pm      Отговорете с цитат


Мда сега чатнах Very Happy.
Не ми беше хрумнало класа да е разделен на повече нива (не знам как се нарича) този тип "subselect sub-1 active".
До сега при мен беше class="sub-1" и го сменях на class="sub-1-active" но така съм се ограничавал откъм опции.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
anonimen
Активен
Активен

Регистриран на: 11/06/2012 8:07 pm

Support: 158
Bonus: 315
Мнения: 1472
Мнение 05/09/2018 1:40 pm      Отговорете с цитат


Няма нужда от sub-1, sub-2, sub-3. Сложих някакъв .subselect клас за удобство, иначе може да минем само с .active.

Достатъчно е да групираш субселектите по някакъв удобен начин, за да можеш лесно да ги идентифицираш, примерно да ги сложи в някакъв елемент:

HTML code:
<div id="subselect-container">
<!-- субселекти без нужда от .subselect клас -->
<!-- ... -->
</div>


И сега можеш така:
Javascript code:
$('.subselect.active') -> $('#subselect-container .active')

$('.subselect.' + data) -> $('#subselect-container .' + data)


Така е малко по-ефективно, защото не преравяш цялата страница за субселектите, а търсиш направо там, където са.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
teroristd
Редовен
Редовен

Регистриран на: 18/02/2010 1:50 pm

Support: 83
Bonus: 178
Мнения: 1741
Мнение 06/09/2018 6:04 am      Отговорете с цитат


xlebabarov написа:
Бях на бачкане и сега се върнах.. изглежда добре! Само където пробвах първия код и нещо нищо не изкарва подопциите въобще при смяна. Някъкви идеи? Crying or Very sad


Остави го първият код. Ето ти новият. Само трябва да си сложиш едно jQuery. Също ако искаш можеш да си го преправиш с div както е показал @anonimen.


<style>
        .subselect.active {
            display: block;
        }

        .subselect {
            display: none;
        }
</style>



<form>

    <select name="website" id="main" onchange="mainChange()">
        <option data-target="sub-1">Global</option>
        <option data-target="sub-2">Desita</option>
        <option data-target="sub-3">Pro-Sdelka</option>
    </select>

    <select name="product" class="subselect sub-1 active">
        <option>Първа стока от Global</option>
        <option>Втора стока от Global</option>
        <option>Трета стока от Global</option>
    </select>

    <select name="product" class="subselect sub-2">
        <option>Първа стока от Desita</option>
        <option>Втора стока от Desita</option>
        <option>Трета стока от Desita</option>
    </select>

    <select name="product" class="subselect sub-3">
        <option>Първа стока от Pro-Sdelka</option>
        <option>Втора стока от Pro-Sdelka</option>
        <option>Трета стока от Pro-Sdelka</option>
    </select>

</form>



<script>

    function mainChange() {

        var element = $('#main').find('option:selected');
        var data = element.attr("data-target");

        $('.subselect.active').removeClass('active');
        $('.subselect.' + data).addClass('active');

    }

</script>
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Покажи мнения от преди:    
Създайте нова тема   Напишете отговор    web-tourist.net Форуми -> HTML / Javascript / CSS Часовете са според зоната GMT + 2 Часа
12
Страница 2 от 2


 
Идете на:  
Не Можете да пускате нови теми
Не Можете да отговаряте на темите
Не Можете да променяте съобщенията си
Не Можете да изтривате съобщенията си
Не Можете да гласувате в анкети