Свързани SELECTS

User avatar
anonimen
Много Редовен
Много Редовен
Posts: 1523
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 162
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Mon Sep 03, 2018 2:18 pm

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

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

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

User avatar
teroristd
Много Редовен
Много Редовен
Posts: 1769
Joined: Thu Feb 18, 2010 11:50 am
Answers: 83

Post by teroristd » Wed Sep 05, 2018 8:02 am

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

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

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

User avatar
anonimen
Много Редовен
Много Редовен
Posts: 1523
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 162
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Wed Sep 05, 2018 9:41 am

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

[js]$('.subselect.active').removeClass('active');
[/js]
2. След това показваш новия:

[js]$('.subselect.' + data).addClass('active');
[/js]
3. На дефолтовия субселект слагаш active клас по default:

[html]<select class="subselect active">[/html]

Толкоз :wink:

User avatar
xlebabarov
Нов
Нов
Posts: 184
Joined: Tue Nov 10, 2009 6:24 am

Post by xlebabarov » Wed Sep 05, 2018 10:52 am

Бях на бачкане и сега се върнах.. изглежда добре! Само където пробвах първия код и нещо нищо не изкарва подопциите въобще при смяна. Някъкви идеи? :cry:
Last edited by xlebabarov on Wed Sep 05, 2018 11:48 am, edited 1 time in total.
Гошо пича ;) Понякога питам въпросчета с повишена трудност, но какво да се прави :)

User avatar
teroristd
Много Редовен
Много Редовен
Posts: 1769
Joined: Thu Feb 18, 2010 11:50 am
Answers: 83

Post by teroristd » Wed Sep 05, 2018 11:03 am

Мда сега чатнах :D.
Не ми беше хрумнало класа да е разделен на повече нива (не знам как се нарича) този тип "subselect sub-1 active".
До сега при мен беше class="sub-1" и го сменях на class="sub-1-active" но така съм се ограничавал откъм опции.

User avatar
anonimen
Много Редовен
Много Редовен
Posts: 1523
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 162
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Wed Sep 05, 2018 11:40 am

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

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

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

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

$('.subselect.' + data) -> $('#subselect-container .' + data) [/js]

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

User avatar
teroristd
Много Редовен
Много Редовен
Posts: 1769
Joined: Thu Feb 18, 2010 11:50 am
Answers: 83

Post by teroristd » Thu Sep 06, 2018 4:04 am

xlebabarov wrote:Бях на бачкане и сега се върнах.. изглежда добре! Само където пробвах първия код и нещо нищо не изкарва подопциите въобще при смяна. Някъкви идеи? :cry:
Остави го първият код. Ето ти новият. Само трябва да си сложиш едно jQuery. Също ако искаш можеш да си го преправиш с div както е показал @anonimen.

Code: Select all

<style>
        .subselect.active &#123;
            display&#58; block;
        &#125;

        .subselect &#123;
            display&#58; none;
        &#125;
</style>

Code: Select all

<form>

    <select name="website" id="main" onchange="mainChange&#40;&#41;">
        <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>

Code: Select all

<script>

    function mainChange&#40;&#41; &#123;

        var element = $&#40;'#main'&#41;.find&#40;'option&#58;selected'&#41;;
        var data = element.attr&#40;"data-target"&#41;;

        $&#40;'.subselect.active'&#41;.removeClass&#40;'active'&#41;;
        $&#40;'.subselect.' + data&#41;.addClass&#40;'active'&#41;;

    &#125;

</script>

Post Reply