Как вывести 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>

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

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 комментария

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

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

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

JavaScript

Средний
Как сделать swiper autoplay с несколькими видео?
- 1 подписчик
- 8 часов назад
- 36 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Почему неправильное время в Java Script?
- 1 подписчик
- 8 часов назад
- 66 просмотров
0

ответов
JavaScript

Простой
Как получить родителя с определенным атрибутом?
- 1 подписчик
- 9 часов назад
- 27 просмотров
1

ответ
JavaScript

Простой
Есть ли какой нибудь полифил для importmap?
- 1 подписчик
- 14 часов назад
- 47 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Ошибка three на редми ноте 7 как решить?
- 1 подписчик
- 17 часов назад
- 73 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Какой тип данных у RegExp, TypedArray и других?
- 1 подписчик
- 20 часов назад
- 113 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Мулти селект Dropdown. Как можно создать многослойный мулти селект?
- 1 подписчик
- 22 часа назад
- 66 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Google блокирует запрос на вход,что делать?
- 2 подписчика
- вчера
- 250 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Почему window.scrollTo(0, document.body.scrollHeight); не работает?
- 1 подписчик
- вчера
- 62 просмотра
0

ответов
CSS

Средний
Возможен ли отступ только второй строки CSS clamp?
- 1 подписчик
- вчера
- 60 просмотров
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Доработать интеграцию на сайте в Tilda через вебхук

25 дек. 2024, в 06:40

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

Периодически возникает ошибка при включении сайта на open server

25 дек. 2024, в 02:45

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

Разработать нативное приложение под iOS

25 дек. 2024, в 00:52

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

Ну и что именно не получается? или это задание? "сделайте скрипт за меня"?
Артем Будин, за меня делать ничего не надо, если было бы так я бы всё сделал на готовых движках, учусь, упёрся и не знаю как сделать эту задачку...
вот пример: мне надо что бы когда я выбирал 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?

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

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

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