Селект для раскрытия блока

Question

Имеется скрипт:

<script>
<!--
function ChangeGenerate(val)
{
    if(val)
    {
        document.getElementById("sof_choose_login").style.display='none';
    }
    else
    {
        document.getElementById("sof_choose_login").style.display='block';
        document.getElementById("NEW_GENERATE_N").checked = true;
    }

    try{document.order_reg_form.NEW_LOGIN.focus();}catch(e){}
}
//-->
</script>

Он отвечает за скрытие/раскрытие блока, вот код блока:

<div id="sof_choose_login">
Test txt
</div>

Срабатывает, когда кликом ставим радиокнопку:

<input type="radio" id="NEW_GENERATE_N" name="NEW_GENERATE" value="N" onclick="ChangeGenerate(false)">

Но, я хочу раскрывать скрытый блок не при клике по input, а через выбор в селект:

  <select id="sof_choose_login" onchange="ChangeGenerate();">
   <option value="1">Option #1</option>
   <option value="2">Option #2</option>
  </select>

Пытался сделать следующим образом:

function ChangeGenerate()
{
 alert(sof_choose_login.selectedIndex);
}

Но, не срабатывает и в консоли вижу ошибки. Пожалуйста подскажите, что не так делаю, видимо логику недовожу!

Спасибо.

Answer 1

Рабочий пример, но вам нужно какая то логика скорее привязка value к data аттрибуту блока

document.getElementById("sof_choose_login").addEventListener("change", (e)=>{
  ChangeGenerate(e)
})
let elements = document.querySelectorAll(".select")
function ChangeGenerate(event){
  elements.forEach(e=>{
    e.style.display = "none"
  })
  elements[event.target.value-1].style.display="flex"
}

.select{
display: none;
color: red;
font-size: 20px;
}

<select id="sof_choose_login">
    <option disabled selected value> -- select an option -- </option>
   <option value="1">Option #1</option>
   <option value="2">Option #2</option>
  </select>
  
  
  <div class="select select1">Select 1</div>
  <div class="select select2">Select 2</div>

UPD Если должен быть какой то пункт выбран по умолчанию Это простой пример, можно посторить логику

document.getElementById("sof_choose_login").addEventListener("change", (e)=>{
  ChangeGenerate(e)
})

let elements = document.querySelectorAll(".select")

function ChangeGenerate(event){
  elements.forEach(e=>{
    e.style.display = "none"
  })
  elements[event.target.value-1].style.display="flex"
}


// При загрузке страницы получить значение активного элемента и показать соотвествующий div 
elements[document.getElementById("sof_choose_login").value-1].style.display = "flex"

.select{
display: none;
color: red;
font-size: 20px;
}

<select id="sof_choose_login">
   <option value="1">Option #1</option>
   <option value="2">Option #2</option>
  </select>
  
  
  <div class="select select1">Select 1</div>
  <div class="select select2">Select 2</div>

Answer 2

Greg - спасибо за помощь!

Я, нашел еще решение, возможно кому поможет как и мне сейчас:

  <select id="test" name="form_select">
   <option value="0">No</option>
   <option value ="1" onClick"showDiv()">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
<script>
var select = document.getElementById('test'),
onChange = function(event) {
  var shown = this.options[this.selectedIndex].value == 1;

    document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};

if (select.addEventListener) {
    select.addEventListener('change', onChange, false);
} else {
  select.attachEvent('onchange', function() {
    onChange.apply(select, arguments);
  });
}
</script>

БЛОГ НА HUSL

Селект для раскрытия блока

Ответы (2 шт):