textarea w <option> bez js

pytanie zadane 13 października 2020 w HTML i CSS przez TOWaD Mądrala (6,000 p.)
zamknięte 13 października 2020 przez TOWaD

<label for="cF">Takie sobie pole wyboru</label>
<select name="chooseField" id="cF">
    <option value="blue">niebieski</option>
    <option value="red">czerwony</option>
    <option value="inny">inny
        <textarea name="" id="" cols="30" rows="10" placeholder="opisz kolor"></textarea>
    </option>
</select>

czy da się to zrobić bez js'a tak by nie wyświetlało się pole <textarea> tylko w html i css

komentarz zamknięcia: Otrzymałem odpowiedz na pytanie.

komentarz 13 października 2020 przez Job102 Bywalec (2,050 p.)

Możesz sprecyzować?

Chcesz, żeby 'textarea' nie było widoczne wogóle? Czy chcesz aby nie pokazywało tekstu w tym polu? Czy może chodzi jeszcze o coś innego?

komentarz 13 października 2020 przez TOWaD Mądrala (6,000 p.)

w ogóle było niewidoczne. Czy jednak bez js się nie da?

komentarz 13 października 2020 przez senpai desu Mądrala (5,720 p.)

@forestG.tmp, jeśli chcesz ukryć
<option hidden="hidden" value="cos">cos</option>

1 odpowiedź

odpowiedź 13 października 2020 przez senpai desu Mądrala (5,720 p.)
wybrane 13 października 2020 przez TOWaD

Najlepsza

Stosowanie innych tagów wewnątrz option jest błędem

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

komentarz 13 października 2020 przez TOWaD Mądrala (6,000 p.)

ok, czyli tylko js jak bym chciał zrobić coś takiego i insertAdjacentHTML?

komentarz 13 października 2020 przez senpai desu Mądrala (5,720 p.)

nie mogę zrozumieć co ostatecznie chcesz osiągnąć jeśli ukryć element to możesz <option hidden="hidden" value="cos">cos</option> w html

komentarz 13 października 2020 przez TOWaD Mądrala (6,000 p.)
edycja 13 października 2020 przez TOWaD

jak niema opcji to wtedy opis w formularzu się pojawił. I nie na stronie tylko taki na kompie plik coś ala interaktywny formularz Worda, tylko bez wykasowywania nie potrzebnych opcji.

I tak z ciekawości bo gdzieś widziałem dołączanie innego dokumentu, czy można zamiast obrazka wczytać inny html w to miejsce czy tylko całą strone?

komentarz 13 października 2020 przez senpai desu Mądrala (5,720 p.)

jeśli możesz to zadaj to pytanie jako nowe, wczytać w sensie zamiast obrazka wyświetlić tagi z textem ?? można podmienić znacznik img na inny za pomocą js, jeśli chcesz wyświetlić stronę zewnętrzną w obrębie swojej możesz użyć <iframe>

komentarz 13 października 2020 przez TOWaD Mądrala (6,000 p.)
edycja 13 października 2020 przez TOWaD

bardziej mi chodziło że gdzieś widziałem #document.... (w odniesieniu do jakiegokolwiek dokumentu) ,ale gdzieś nie mogę skojarzyć gdzie to było.

a dokładnie chodziło mi o coś takiego

<body>
    <label for="cF">Takie sobie pole wyboru</label>
    <select name="chooseField" id="cF">
        <option value="blue">niebieski</option>
        <option value="red">czerwony</option>
        <option value="other">inny</option>
    </select>
    <script>
        {
            let chf = document.getElementById('cF');
            chf.addEventListener('change', addTA);
            function addTA() {
                var newTA = document.createElement('textarea');
                console.log(chf.value);
                if (chf.value == 'other') {
                    chf.insertAdjacentElement('afterend', newTA);
                    console.log('aaa');
                }
            }
        }
    </script>
</body>

tylko bez js

tu oryginalny przykład

https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html

1	komentarz 13 października 2020 przez Comandeer Guru (601,590 p.) Coś takiego dałoby się zrobić np. na ostylowanych input[type=radio], ale nie na select. I wówczas można by wstawiać elementy w CSS-ie. PoC: https://codepen.io/Comandeer/pen/gOMaXrg

komentarz 13 października 2020 przez TOWaD Mądrala (6,000 p.)
edycja 13 października 2020 przez TOWaD

Chodzi mi o edytowalne pole, ale już zostanę przy js nie będę kombinował. Może inny razem.

Chyba że taki kod z js jest nie wskazany?

A jak usunąć jak można spytać bez użycia id.

Chyba coś takiego da się bez js

<body>
    <label for="cF">Takie sobie pole wyboru</label>
    <select name="chooseField" id="cF">
        <option value="blue">niebieski</option>
        <option value="red">czerwony</option>
        <option value="other">inny</option>
    </select>
    <script>
        {
            let chf = document.getElementById('cF');
            var flag = '0';
            console.log(flag);
            chf.addEventListener('change', addTA);
            function addTA() {           
                var newTA = document.createElement('textarea');
               console.log('id=',newTA.id='next-element');
               if (flag=='1'){
                   delete newTA;
                   rem ('next-element');
                   flag='0';
                }
                else if (this.value === 'other' && flag == '0') {
                    this.insertAdjacentElement('afterend', newTA);
                    flag = '1';
                } else {
                    delete newTA;
                }
                console.log(flag);
            }
            function rem (arg) {
                var r= document.getElementById(arg);
                r.remove();
            }
        }

    </script>
</body>