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

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

Support: 5
Bonus: 10
Мнения: 162
Мнение 28/08/2018 11:32 am     Свързани SELECTS Отговорете с цитат


Здравейте, как мога да използвам два свързани селекта кода ми е следният:
<select name="website"><option value="1">Global</option>
<option value="2">Desita</option>
<option value="3">Pro-Sdelka</option>
</select>


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


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


Съответно Pro-Sdelka да отваря този код:
<select name="product"><option id="7">Първа стока от Pro-Sdelka</option>
<option id="8">Втора стока от Pro-Sdelka</option>
<option id="9">Трета стока от Pro-Sdelka</option>
</select>
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
teroristd
Редовен
Редовен

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

Support: 83
Bonus: 178
Мнения: 1741
Мнение 30/08/2018 12:58 pm      Отговорете с цитат


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

<form>

    <select name="website" id="main" onchange="mainChange()">
        <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() {

        var val = document.getElementById("main").value;
        var sub = document.getElementById("sub");

        if (val === "1") {
            sub.innerHTML =
                "<option id='1'>Първа стока от Global</option>" +
                "<option id='2'>Втора стока от Global</option>" +
                "<option id='2'>Трета стока от Global</option>";
        }

        if (val === "2") {
            sub.innerHTML =
                "<option id='4'>Първа стока от Desita</option>" +
                "<option id='5'>Втора стока от Desita</option>" +
                "<option id='6'>Трета стока от Desita</option>";
        }

        if (val === "3") {
            sub.innerHTML =
                "<option id='7'>Първа стока от Pro-Sdelka</option>" +
                "<option id='8'>Втора стока от Pro-Sdelka</option>" +
                "<option id='9'>Трета стока от Pro-Sdelka</option>";
        }
    }

    if (mainChange() === false) {
        sub.innerHTML =
            "<option id='1'>Първа стока от Global</option>" +
            "<option id='2'>Втора стока от Global</option>" +
            "<option id='2'>Трета стока от Global</option>";
    }

</script>
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
anonimen
Активен
Активен

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

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


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

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

Support: 83
Bonus: 178
Мнения: 1741
Мнение 31/08/2018 9:58 am      Отговорете с цитат


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


Аз бих опитал, обаче не ми е ясен този data-target атрибут. Това не е ли нещо от bootstrap? Също така не е ли по-добре връзката с id-то на съответстващия субселект да са id-та на option-ите? Какво е предимството на този data-target атрибут?
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
anonimen
Активен
Активен

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

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


teroristd написа:
anonimen написа:
Аз бих препоръчал селектите да живеят в хтмл сорса и показването да се управлява чрез 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".
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
teroristd
Редовен
Редовен

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

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


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


<style>
    .sub-1 {
        display: none;
    }

    .sub-1-active {
        display: block;
    }

    .sub-2 {
        display: none;
    }

    .sub-2-active {
        display: block;
    }

    .sub-3 {
        display: none;
    }

    .sub-3-active {
        display: block;
    }
</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="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>

$('.sub-1').removeClass('sub-1').addClass('sub-1-active');

function mainChange() {

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

    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');
    }

    if (data == 'sub-3') {
        $('.sub-3').removeClass('sub-3').addClass('sub-3-active');
    }
    else {
        $('.sub-3-active').removeClass('sub-3-active').addClass('sub-3');
    }

}

</script>
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
anonimen
Активен
Активен

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

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


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

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

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

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

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

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


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

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


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

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

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


Вместо да проверяваш всички възможности за data-target, директно извикай .show() върху елемента, съответстващ на data-targetа. Решението мога да дам веднага, но ще е по-продуктивно сам да се сетиш.
Javascript code:

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');
}


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

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

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


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

Javascript code:

function mainChange() {
var element = $('#main').find('option:selected');
var data = element.attr("data-target");
$('.' + data).removeClass(data).addClass(data + '-active');
}
[/php]
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
anonimen
Активен
Активен

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

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


Сега разбираш ли защо Very Happy

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

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

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

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


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

П.П.

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


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