Поле ввода после выбора элемента из выпадающего списка

121

17 декабря 2020, 17:10

Не могу понять в чем дело. Должно при выборе "Социальная сеть" из выпадающего списка, ниже появляться поле ввода для возможности внесения ссылки на данную социальную сеть.

function i() { 
 var social = document.getElementById("social"); 
 var selectSocial = social.option[social.selectedIndex].value; 
 if (selectSocial == "soc") { 
  var show = document.getElementById("show"); 
  show.style.display = inherit; 
 } 
}

input { 
            margin: 0 auto; 
            font-size: 15px; 
            padding: 5px; 
            margin: 5px 0; 
            width: 80%; 
            border: 2px solid blue; 
            border-radius: 5px; 
} 
 #show { 
            display: none; 
        }

<form action="server.php" method="POST"> 
        <p> Желаемый способ связи:</p> 
        <select name="connection" id="social"> 
          <option value="telegram">Telegram</option> 
          <option value="soc">Социальная сеть</option> 
        </select> 
        <input type="text" placeholder="Введите ссылку или фио в соц.сети" id="show"> 
</form>

Answer 1

Массив вариантов выбора это не social.option а social.options
css значение свойства 'inherit' это строка а у Вас ссылка на несуществующую переменную.
Так же требуется обратное действие, как я полагаю:

function i() { 
 var social = document.getElementById("social"); 
 var selectSocial = social.options[social.selectedIndex].value; 
 var isSocial = selectSocial == "soc" 
  var show = document.getElementById("show"); 
  show.style.display = isSocial ? 'inherit': 'none'; 
  
}

input { 
  margin: 0 auto; 
  font-size: 15px; 
  padding: 5px; 
  margin: 5px 0; 
  width: 80%; 
  border: 2px solid blue; 
  border-radius: 5px; 
} 
 
#show { 
  display: none; 
}

<form action="server.php" method="POST"> 
  <p> Желаемый способ связи:</p> 
  <select name="connection" id="social" onchange="i()"> 
    <option value="telegram">Telegram</option> 
    <option value="soc">Социальная сеть</option> 
  </select> 
  <input type="text" placeholder="Введите ссылку или фио в соц.сети" id="show"> 
</form>