Свързани SELECTS

User avatar
anonimen
Web-tourist
Web-tourist
Posts: 1589
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 163
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Mon Sep 03, 2018 1:31 pm

Сега разбираш ли защо :D

Сведе 25 реда функция до 3 :)

А сега и css-a изчисти. Имаш 6 класа за 3 опции. Про 10 опции ще трябва да поддържаш 20 класа.

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

Post by teroristd » Mon Sep 03, 2018 1:48 pm

Така обаче има два проблема :). Първият е че един път показан селекта не може да се скрие. Вторият е че няма дефаултов. Един вид главният селект стои на първата опция, а за да покажеш съответстващият му подселект, трябва първо да изберш някоя друга и пак да се върнеш на първата.

П.П.

Само xlebabarov нищо не казва по темата :D.

User avatar
anonimen
Web-tourist
Web-tourist
Posts: 1589
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 163
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
Web-tourist
Web-tourist
Posts: 1589
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 163
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: 186
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
Web-tourist
Web-tourist
Posts: 1589
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 163
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