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

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

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

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 32 минуты назад
- 11 просмотров
0

ответов
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- 6 часов назад
- 67 просмотров
0

ответов
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 8 часов назад
- 70 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 11 часов назад
- 81 просмотр
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 16 часов назад
- 77 просмотров
0

ответов
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 20 часов назад
- 430 просмотров
1

ответ
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- вчера
- 70 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- вчера
- 53 просмотра
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- вчера
- 58 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- вчера
- 68 просмотров
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

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

До 220 000 ₽

Создать сервер VPS через wireguard

24 нояб. 2024, в 00:04

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

Добавить интеграцию оплаты Telegram Payments 2.0 в Mini App (React)

23 нояб. 2024, в 23:30

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

Нарисовать инфографику в 3-х вариантах

23 нояб. 2024, в 23:03

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

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

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

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

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