Как вывести input при определённом выборе из select а так же убирать input при выборе других вариантов из select?

Question

Gambi Titto @Gambi-Titto

Начинающий програмист

Как вывести input при определённом выборе из select а так же убирать input при выборе других вариантов из select?

вот пример формы: Другое при выборе другое хочется что бы появлялась дополнительный input для ввода текста и что бы оно пропадало если не был выбран "Другое"...

<div class="form-group">
              <div class="col-sm-12">
                <div class="form-group">
                  <select class="custom-select" id="participation" name="participation"  required x-autocompletetype="participation">
                    <option value="">Тип участия</option>
                    <option value="Музыкант">Музыкант</option>
                    <option value="Волонтёр">Волонтёр</option>
                    <option value="Ведущий">Ведущий</option>
                    <option value="Спикер">Спикер</option>
                    <option value="Другое">Другое</option>
                  </select>
                  <div class="invalid-feedback">Выберите пожалуйста тип участия</div>
                </div>
              </div>
              </div>

Вопрос задан более трёх лет назад
2353 просмотра

2 комментария

Подписаться 1 Простой 2 комментария

FeST1VaL @FeST1VaL

Ну и что именно не получается? или это задание? "сделайте скрипт за меня"?

Написано более трёх лет назад

Gambi Titto @Gambi-Titto Автор вопроса

Артем Будин, за меня делать ничего не надо, если было бы так я бы всё сделал на готовых движках, учусь, упёрся и не знаю как сделать эту задачку...
вот пример: мне надо что бы когда я выбирал 5 выкатывался input а когда другую выбирал пропадал input

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
 
<body>
  <select>
    <option selected="true" disabled="disabled"></option>
    <option value="4">4</option>
    <option value="" id="participation">5</option>
  </select>
<div class="musician_input_div form-group" style="display:none;">
  <input type="text" id="musician_input" />
</div>
 
  <script>
$('#participation').change(function(){
    var selectval= $(this).val(); // Получим значение из select со значением #participation
    if( selectval== 'musician' ) {
        $('.musician_input_div').show();
    } else {
        $('.musician_input_div').hide();
    }
});
  </script>
</body>
 
</html>

Написано более трёх лет назад

Решения вопроса 1

11 комментариев

Gambi Titto @Gambi-Titto Автор вопроса

не получилось, во пример на обычном коде

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
 
<body>
  <select id="participation">
    <option selected="true" disabled="disabled"></option>
    <option value="4">4</option>
    <option id="musician" value="">5</option>
  </select>
<div class="musician_input_div form-group" style="display:none;">
  <input type="text" id="musician_input" />
</div>
 
  <script>
$('#participation').change(function(){
    var selectval= $(this).val(); // Получим значение из select со значением #participation
    if( selectval== 'musician' ) {
        $('.musician_input_div').show();
    } else {
        $('.musician_input_div').hide();
    }
});
  </script>
</body>
 
</html>

Написано более трёх лет назад

Глеб Варганов @kores
Вот пример работающего кода:

Вы не указали value, а вместо этого вставили ID для элементов списка
Правильно сделал вам список

snippet
Написано более трёх лет назад
Gambi Titto @Gambi-Titto Автор вопроса

Глеб Варганов, консоль ругается на эта:$('#participation').change(function(){

И на редакторе кода не работает, пробовал подключать JQuery.

От счастья прыгал, но как всегда что то пошло не так)
Буду признателен если поможешь мне уже окончательно)

Написано более трёх лет назад
FeST1VaL @FeST1VaL

Gambi Titto, чувак, ну базовые знания же должны быть чтобы лезть... какая ошибка? наверняка не подключен JQuery

Написано более трёх лет назад

Gambi Titto @Gambi-Titto Автор вопроса

Артем Будин, ты тут воздух не тряси, помогаешь помогай или помогаешь проходи мимо

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <script>
                $('#participation').change(function(){
            
            var selectval= $(this).val(); // Получим значение из select со значением #participation
            if( selectval=='5' ) {
                $('.musician_input_div').show();
            } else {
                $('.musician_input_div').hide();
            }
            });
                </script>
    <select id="participation">
        <option  selected="true" disabled="disabled"></option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    <div class="musician_input_div form-group" style="display:none;">
      <input type="text" id="musician_input" />
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>

Написано более трёх лет назад

FeST1VaL @FeST1VaL

Gambi Titto, и зачем мне это ты скинул? ну у тебя все работает, в чем еще проблема то? Тебе уже разжевали и положили в рот. Ах да и еще как бы скрипт должен идти после элемента на который навешиваешь событие. ПРОЙДИ БАЗОВЫЙ HTML/JS

snippet

Написано более трёх лет назад
Глеб Варганов @kores

Gambi Titto, Дружище, тут Артем Будин тебе правильно написал, ты вместо того, чтобы огрызаться, попытайся понять что он написал. Артем указал, что у тебя скрипт идет ДО подключения jQuery. Так же по поводу базовых знаний - тебе тут конечно подскажут, ну дальше вставить чужой скрипт ты не пойдешь, а это не хорошо.

Просто подключи jQuery до выполнения скрипта, чтобы в момент рендеринга html он мог уже использовать библиотеку jQuery, тк уже ее инициализировал.

Написано более трёх лет назад

Gambi Titto @Gambi-Titto Автор вопроса

Глеб Варганов, Артем Будин, Ребята, я не отрицаю что знания у меня нубовские но я правда не хочу никого обидеть и тем более ни с кем огрызаться, просто я упёрся) вот что я сделал и тоже не работает...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <script>
$('#participation').change(function(){
    var selectval= $(this).val(); // Получим значение из select со значением #participation
    if( selectval== 'musician' ) {
        $('.musician_input_div').show();
    } else {
        $('.musician_input_div').hide();
    }
});
    </script>
<select id="participation">
        <option value="">Тип участия</option>
        <option value="musician">Музыкант</option>
        <option value="volunteer">Волонтёр</option>
        <option value="host">Ведущий</option>
        <option value="speaker">Спикер</option>
        <option value="other">Другое</option>
      </select>
        
      <div class="musician_input_div form-group" style="display:none;">
        <input type="text" id="musician_input" value="Инпут музыкант"/>
      </div>    
</body>
</html>

Написано более трёх лет назад

FeST1VaL @FeST1VaL

Gambi Titto, script и все что внутри перенеси вниз под свой инпут. Скрипт не видит твоего селектора...

snippet

Написано более трёх лет назад
Gambi Titto @Gambi-Titto Автор вопроса

Артем Будин, Наконец-тооооо... да ребята я тупой)) простите за мозго**ства.. всем спасибо.

Написано более трёх лет назад
Глеб Варганов @kores

Gambi Titto, дело не в тупизне, я когда давно давно начинал, я тупо копировал чужой код - и если работало, то супер, если нет, то искал другое решение, которое можно скопировать. Потом у меня случился интересен, что будет, если разобрать, как работает каждая строка. Я вывел условно в консоль значение каждой переменной, разобрался что делали мини функции и изучил чужой скрипт до дыр. Самое главное - я понял логику и после понимания логики - он мне показался простым, как пример 2+2+3, ведь он не вызывает сложности почему это равно 7? После этого я начал разбирать чужие скрипты и так учиться. Потом ставил задачи себе и изучал и так до сих пор учусь всегда)

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

2 комментария

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 1 подписчик
- 20 минут назад
- 13 просмотров
1

ответ
CSS

Средний
Почему у элемента такое поведение?
- 3 подписчика
- 10 часов назад
- 826 просмотров
0

ответов
CSS

Простой
Почему не работает transition свойство в scss файле через webpack?
- 1 подписчик
- 13 часов назад
- 50 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему верхние и нижние внешние отступы пустого блока не схлопываются?
- 1 подписчик
- 16 часов назад
- 94 просмотра
4

ответа
CSS

Простой
Почему нет задержки между повторами анимации?
- 1 подписчик
- 17 часов назад
- 54 просмотра
1

ответ
HTML

+1 ещё

Простой
Почему пустой div смещается, если ему задать margin-bottom?
- 1 подписчик
- 17 часов назад
- 90 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- 17 часов назад
- 50 просмотров
1

ответ
CSS

Простой
Почему не сужается flex-элемент с flex-shrink: 1?
- 1 подписчик
- 18 часов назад
- 74 просмотра
0

ответов
JavaScript

Простой
Как получить результат отправки на сервер, если fetch-запрос был в одной функции, а результат нужен в другой?
- 1 подписчик
- 19 часов назад
- 67 просмотров
1

ответ
CSS

+1 ещё

Средний
При сборке webpack картинки из css не открываются?
- 1 подписчик
- 23 часа назад
- 80 просмотров
1

ответ
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript разработчик

Мэтч

от 80 000 ₽

Топик моделлинг заголовков новостей

23 апр. 2024, в 10:50

5000 руб./за проект

Написать расширение для браузеров Chrome / Firefox

23 апр. 2024, в 10:48

15000 руб./за проект

UX разработка интерфейсов в маркетплейс

23 апр. 2024, в 10:43

10000 руб./за проект

Ну и что именно не получается? или это задание? "сделайте скрипт за меня"?
Артем Будин, за меня делать ничего не надо, если было бы так я бы всё сделал на готовых движках, учусь, упёрся и не знаю как сделать эту задачку...
вот пример: мне надо что бы когда я выбирал 5 выкатывался input а когда другую выбирал пропадал input
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <select> <option selected="true" disabled="disabled"></option> <option value="4">4</option> <option value="" id="participation">5</option> </select> <div class="musician_input_div form-group" style="display:none;"> <input type="text" id="musician_input" /> </div> <script> $('#participation').change(function(){ var selectval= $(this).val(); // Получим значение из select со значением #participation if( selectval== 'musician' ) { $('.musician_input_div').show(); } else { $('.musician_input_div').hide(); } }); </script> </body> </html>

Answer 1 · 2019-10-16 15:46:36

Добавить в html

<div class="musician_input_div form-group" style="display:none;">
	<input type="text" id="musician_input" />
</div>

// Если value у select с ID participation РАВНО musician, то код выведет инпут, если другое - то скроет его

$('#participation').change(function(){
    var selectval= $(this).val(); // Получим значение из select со значением #participation
    if( selectval== 'musician' ) {
        $('.musician_input_div').show();
    } else {
        $('.musician_input_div').hide();
    }
});

И переименуй значения value в латиницу, так корректнее

Answer 2 · 2019-10-16 15:40:50

Ловите событие изменения значения Select .change()
Затем проверяете, чему равно значение, если "Другое", то показываете блок с input

Как вывести input при определённом выборе из select а так же убирать input при выборе других вариантов из select?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт