Как сделать так, чтобы при выборе какого-то определенного элемента из списка, выполнялось какое-то определенное действие?

Question

    <!DOCTYPE html>
    <html>
        <head>
            <title>Selected Option Value</title>
            <meta charset="windows-1252">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body>
           
            <select id="list" onchange="getSelectValue();">
                <option value="js">JavaScript</option>
                <option value="php">PHP</option>
                <option value="c#">Csharp</option>
                <option value="java">Java</option>
                <option value="node">Node.js</option>
            </select>
<script>

function getSelectValue(){
var selectedValue = document.getElementById("list").value;
if(selectedValue == "PHP"){
  alert('hello')
}
}
getSelectValue();

</script>
        </body>
    </html>

Answer 1

Вы должны получить значение тега option, а не select.

const list = document.querySelector('#list')

list.addEventListener('change', (e)=>{
    let value = e.target.value
    console.log(value)
    if(value == 'js'){
        alert('Hello')
    }else if(value == 'php'){
        alert('World')
    }else if(value == 'c#'){
        alert('Hello World')
    }
})

<select id="list">
    <option class="item" value="js">JavaScript</option>
    <option class="item" value="php">PHP</option>
    <option class="item" value="c#">Csharp</option>
    <option class="item" value="java">Java</option>
    <option class="item" value="node">Node.js</option>
</select>

Answer 2

Вы пытались вызвать сообщение взяв значение не из value у элемента option, чему и будет равно value для select, а из текстового значения option, для этого есть свойство элемента innerHTML. Однако ваш вариант будет тяжелее поддерживать из-за однопоточности JS. Советую выносить весь такой код во внешний файл скрипта, что также способобствует упорядоченности кода и уменьшеает вероятность ошибок из-за области видимости во время исполнения кода.

Также можно воспользовать конструкцией swtich

P.S ключевое слово var считается устаревшим

function getSelectValue(e){
  let selectedValue = e.target.value;
  
  if (selectedValue == "php") {
    alert('hello');
  }
}

const list = document.querySelector('#list');

list.addEventListener('change', function(e) {  
  getSelectValue(e)
});

<select id="list">
    <option value="js">JavaScript</option>
    <option value="php">PHP</option>
    <option value="c#">Csharp</option>
    <option value="java">Java</option>
    <option value="node">Node.js</option>
</select>

Пример со switch:

function getSelectValue(e){
  let selectedValue = e.target.value;
  
  switch(selectedValue) {
    case 'js':
      alert('js');
      break;
    case 'php':
      alert('php');
      break;
    case 'c#':
      alert('c#');
      break;
    case 'java':
      alert('java');
      break;
    case 'node':
      alert('node');
      break;
  }

}

const list = document.querySelector('#list');

list.addEventListener('change', function(e) {  
  getSelectValue(e)
});

<select id="list">
  <option value="js">JavaScript</option>
  <option value="php">PHP</option>
  <option value="c#">Csharp</option>
  <option value="java">Java</option>
  <option value="node">Node.js</option>
</select>

БЛОГ НА HUSL

Как сделать так, чтобы при выборе какого-то определенного элемента из списка, выполнялось какое-то определенное действие?

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