Свързани SELECTS

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

Свързани SELECTS

Post by xlebabarov » Tue Aug 28, 2018 9:32 am

Здравейте, как мога да използвам два свързани селекта кода ми е следният:

Code: Select all

<select name="website"><option value="1">Global</option>
<option value="2">Desita</option>
<option value="3">Pro-Sdelka</option>
</select>
Съответно Глобал да отваря този код:

Code: Select all

<select name="product"><option id="1">Първа стока от Global</option>
<option id="2">Втора стока от Global</option>
<option id="3">Трета стока от Global</option>
</select>
Съответно Desita да отваря този код:

Code: Select all

<select name="product"><option id="4">Първа стока от Desita</option>
<option id="5">Втора стока от Desita</option>
<option id="6">Трета стока от Desita</option>
</select>
Съответно Pro-Sdelka да отваря този код:

Code: Select all

<select name="product"><option id="7">Първа стока от Pro-Sdelka</option>
<option id="8">Втора стока от Pro-Sdelka</option>
<option id="9">Трета стока от Pro-Sdelka</option>
</select>
Гошо пича ;) Понякога питам въпросчета с повишена трудност, но какво да се прави :)

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

Post by teroristd » Thu Aug 30, 2018 10:58 am

Например така.

Code: Select all

<form>

    <select name="website" id="main" onchange="mainChange&#40;&#41;">
        <option value="1">Global</option>
        <option value="2">Desita</option>
        <option value="3">Pro-Sdelka</option>
    </select>

    <select name="product" id="sub"></select>

</form>

<script>

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

        var val = document.getElementById&#40;"main"&#41;.value;
        var sub = document.getElementById&#40;"sub"&#41;;

        if &#40;val === "1"&#41; &#123;
            sub.innerHTML =
                "<option id='1'>Първа стока от Global</option>" +
                "<option id='2'>Втора стока от Global</option>" +
                "<option id='2'>Трета стока от Global</option>";
        &#125;

        if &#40;val === "2"&#41; &#123;
            sub.innerHTML =
                "<option id='4'>Първа стока от Desita</option>" +
                "<option id='5'>Втора стока от Desita</option>" +
                "<option id='6'>Трета стока от Desita</option>";
        &#125;

        if &#40;val === "3"&#41; &#123;
            sub.innerHTML =
                "<option id='7'>Първа стока от Pro-Sdelka</option>" +
                "<option id='8'>Втора стока от Pro-Sdelka</option>" +
                "<option id='9'>Трета стока от Pro-Sdelka</option>";
        &#125;
    &#125;

    if &#40;mainChange&#40;&#41; === false&#41; &#123;
        sub.innerHTML =
            "<option id='1'>Първа стока от Global</option>" +
            "<option id='2'>Втора стока от Global</option>" +
            "<option id='2'>Трета стока от Global</option>";
    &#125;

</script>

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

Post by anonimen » Thu Aug 30, 2018 5:09 pm

Аз бих препоръчал селектите да живеят в хтмл сорса и показването да се управлява чрез css display: none/block. Option-ите ще имат data-target атрибут, който ще е връзката с id-то на съответстващия субселект. Нямам възможност да пиша код в момента - ако на някого му се занимава, нека имплементира идеята.

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

Post by teroristd » Fri Aug 31, 2018 7:58 am

anonimen wrote:Аз бих препоръчал селектите да живеят в хтмл сорса и показването да се управлява чрез css display: none/block. Option-ите ще имат data-target атрибут, който ще е връзката с id-то на съответстващия субселект. Нямам възможност да пиша код в момента - ако на някого му се занимава, нека имплементира идеята.
Аз бих опитал, обаче не ми е ясен този data-target атрибут. Това не е ли нещо от bootstrap? Също така не е ли по-добре връзката с id-то на съответстващия субселект да са id-та на option-ите? Какво е предимството на този data-target атрибут?

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

Post by anonimen » Fri Aug 31, 2018 9:10 am

teroristd wrote:
anonimen wrote:Аз бих препоръчал селектите да живеят в хтмл сорса и показването да се управлява чрез css display: none/block. Option-ите ще имат data-target атрибут, който ще е връзката с id-то на съответстващия субселект. Нямам възможност да пиша код в момента - ако на някого му се занимава, нека имплементира идеята.
Аз бих опитал, обаче не ми е ясен този data-target атрибут. Това не е ли нещо от bootstrap? Също така не е ли по-добре връзката с id-то на съответстващия субселект да са id-та на option-ите? Какво е предимството на този data-target атрибут?
Optionите на главния селект не могат да имат същите id-та като субселектите, защото id-тата в един документ трябва да са уникални. А с класове не е добра идея, защото може по случайност да ползваш същия клас някъде другаде в страницата и да се приложи нежелан стил върху селектите.

А атрибутът data-target е съвсем фиктивен и няма нищо общо с bootstrap, освен че библиотеката използва това име за някакви цели. Data-* атрибутите в html ти дават място да запишеш допълнителна информация за даден елемент, която иначе не би била подходяща за id/class или други стандартни атрибути на съответния елемент.
Google for "html data attributes".

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

Post by teroristd » Mon Sep 03, 2018 7:49 am

Успях да скалъпя някакъв код с data-target атрибут който работи, само че не не сменям css-a a направо класовете, но то е същото :).

Code: Select all

<style>
    .sub-1 &#123;
        display&#58; none;
    &#125;

    .sub-1-active &#123;
        display&#58; block;
    &#125;

    .sub-2 &#123;
        display&#58; none;
    &#125;

    .sub-2-active &#123;
        display&#58; block;
    &#125;

    .sub-3 &#123;
        display&#58; none;
    &#125;

    .sub-3-active &#123;
        display&#58; block;
    &#125;
</style>

<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="sub-1">
        <option>Първа стока от Global</option>
        <option>Втора стока от Global</option>
        <option>Трета стока от Global</option>
    </select>

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

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

</form>

<script>

$&#40;'.sub-1'&#41;.removeClass&#40;'sub-1'&#41;.addClass&#40;'sub-1-active'&#41;;

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

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

    if &#40;data == 'sub-1'&#41; &#123;
        $&#40;'.sub-1'&#41;.removeClass&#40;'sub-1'&#41;.addClass&#40;'sub-1-active'&#41;;
    &#125;
    else &#123;
        $&#40;'.sub-1-active'&#41;.removeClass&#40;'sub-1-active'&#41;.addClass&#40;'sub-1'&#41;;
    &#125;

    if &#40;data == 'sub-2'&#41; &#123;
        $&#40;'.sub-2'&#41;.removeClass&#40;'sub-2'&#41;.addClass&#40;'sub-2-active'&#41;;
    &#125;
    else &#123;
        $&#40;'.sub-2-active'&#41;.removeClass&#40;'sub-2-active'&#41;.addClass&#40;'sub-2'&#41;;
    &#125;

    if &#40;data == 'sub-3'&#41; &#123;
        $&#40;'.sub-3'&#41;.removeClass&#40;'sub-3'&#41;.addClass&#40;'sub-3-active'&#41;;
    &#125;
    else &#123;
        $&#40;'.sub-3-active'&#41;.removeClass&#40;'sub-3-active'&#41;.addClass&#40;'sub-3'&#41;;
    &#125;

&#125;

</script>

User avatar
anonimen
Много Редовен
Много Редовен
Posts: 1524
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 8:18 am

Не си ми разбрал идеята поначало :)

В момента, както и в първия код, който даде, ръчно описваш всички селекти. Ако първият селект има 10 опции, то ще трябва да копираш проверката 10 пъти. Ако искаш да направиш 2-3 под-групи, става 10^3=1000 случая. И ти искаш да ги опишеш всичките :D

Вместо това, използвай htmlа, за да запишеш връзката межди селектите. Както си започнал - всяка опция държи в себе си връзка към селекта, който трябва да се активира. И вместо да изброяваш случаи, директно показваш (class=active примерно) селекта, до който води връзката.

Т.е. ако в дата-таргет записваш id, ще активираш селекта със съответното id. Динамично, без да изреждаш случаи.

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

Post by teroristd » Mon Sep 03, 2018 8:36 am

anonimen wrote:Вместо това, използвай htmlа, за да запишеш връзката межди селектите. Както си започнал - всяка опция държи в себе си връзка към селекта, който трябва да се активира. И вместо да изброяваш случаи, директно показваш (class=active примерно) селекта, до който води връзката.

Т.е. ако в дата-таргет записваш id, ще активираш селекта със съответното id. Динамично, без да изреждаш случаи.
Честно казано не разбрах и сега какво имаш предвид :D. Ще трябва да дадеш примерен код.

User avatar
anonimen
Много Редовен
Много Редовен
Posts: 1524
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 11:13 am

Вместо да проверяваш всички възможности за data-target, директно извикай .show() върху елемента, съответстващ на data-targetа. Решението мога да дам веднага, но ще е по-продуктивно сам да се сетиш.
[js]
if (data == 'sub-1') {
$('.sub-1').removeClass('sub-1').addClass('sub-1-active');
}
else {
$('.sub-1-active').removeClass('sub-1-active').addClass('sub-1');
}

if (data == 'sub-2') {
$('.sub-2').removeClass('sub-2').addClass('sub-2-active');
}
else {
$('.sub-2-active').removeClass('sub-2-active').addClass('sub-2');
} [/js]

Не ти ли правят впечатление всичките повторения? И не ти ли прави впечатление, че сравнява data със стойност, която след това използваш точно 6 пъти? Нали е променлива, защо изписваш всичко на ръка - използвай директно променливата.

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

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

Това ли имаш предвид?

[js]
function mainChange() {
var element = $('#main').find('option:selected');
var data = element.attr("data-target");
$('.' + data).removeClass(data).addClass(data + '-active');
}
[/js][/php]

Post Reply