HTML & Javascript - отображать текст при выборе опции выпадающего меню - PullRequest
Новая
       33

HTML & Javascript - отображать текст при выборе опции выпадающего меню

0 голосов
/ 28 января 2020

Итак, я новичок в html / javascript и пытаюсь выяснить, как заставить мое выпадающее меню работать правильно. Внешний вид выглядит неплохо, но когда я нажимаю на любой из вариантов, я пытаюсь выяснить, как изменить макет страницы в зависимости от выбранного варианта. Так, например, если я выберу опцию 1 и нажму кнопку «выбрать», я хочу, чтобы появился обычный текст со словами «Вы нажали опцию 1». Я пытался реализовать это, но он ничего не делает. Если я нажму «выбрать», не выбрав опцию, появится сообщение об ошибке. Я был бы очень признателен за некоторую помощь или pu sh в правильном направлении.

options. html: 

<html>
    <head>
        <title>Welcome</title>

    </head>
    <body onload="init()">
        <div><h1>Welcome</h1></div><br />
    <div class="dropdown">
        <form>
        <select name="list" id="list" accesskey="target">
            <option value="none">Pick an option</option>
            <option value="one">Option 1</option>
            <option value="two">Option 2</option>
            <option value="three">Option 3</option>
        </select>
        <input type=button value="Select" onclick="goToNewPage()" />
        </form>
        </div>
    </div>
        <script src="options.js"></script>
        <link rel="stylesheet" href="dropdown.css">
    </body>
</html>

options. js: 

function optionClicked(){
    let userPicked = document.getElementById("dropdown").value;
    if(userPicked == 'one'){
        div.innerHTML = "You clicked option 1";
    }else if(userPicked == 'two'){
        div.innerHTML = "You clicked option 2.";
    }else if(userPicked == 'three'){
        div.innerHTML = "You clicked option 3.";
    }else{
        alert("You must pick an option.");
    }
}

Ответы [ 3 ]

1 голос
/ 28 января 2020

Как указано в комментарии, вам нужно обратиться к правильному идентификатору и названию функции следующим образом: 

function optionClicked(){
    let userPicked = document.getElementById("list").value;
    var div = document.getElementById("div");
    if(userPicked == 'one'){
        div.innerHTML = "You clicked option 1";
    }else if(userPicked == 'two'){
        div.innerHTML = "You clicked option 2.";
    }else if(userPicked == 'three'){
        div.innerHTML = "You clicked option 3.";
    }else{
        alert("You must pick an option.");
    }
}
<html>
    <head>
        <title>Welcome</title>

    </head>
    <body>
        <div><h1>Welcome</h1></div><br />
    <div class="dropdown">
        <form>
        <select name="list" id="list" accesskey="target">
            <option value="none">Pick an option</option>
            <option value="one">Option 1</option>
            <option value="two">Option 2</option>
            <option value="three">Option 3</option>
        </select>
        <input type=button value="Select" onclick="optionClicked()" />
        </form>
        </div>
    </div>
    <div id="div"></div>
        <script src="options.js"></script>
        <link rel="stylesheet" href="dropdown.css">
    </body>
</html>
0 голосов
/ 28 января 2020

Я решил проблему с помощью jquery. Кроме того, ваш код html имеет блочный конечный тег div. Вы должны это проверить. 

<html>
    <head>
        <title>Welcome</title> 
    </head>
    <body>
        <div><h1>Welcome</h1></div><br />
    <div class="dropdown">
        <form>
        <select name="list" id="list" >
            <option value="none">Pick an option</option>
            <option value="one">Option 1</option>
            <option value="two">Option 2</option>
            <option value="three">Option 3</option>
        </select>
        <input type=button value="Select" onclick="optionClicked()" />
        </form>
    </div> 
        <div id="div"></div> 
        <script src='jquery.min.js'></script>  <!-- include jquery-->
        <script>
            function optionClicked()
            {
                var userPicked = $(`#list`).children("option").filter(":selected").val().trim();
                switch(userPicked)
                {
                    case 'one': div.innerHTML = "You clicked option 1"; break; 
                    case 'two': div.innerHTML = "You clicked option 2."; break; 
                    case 'three': div.innerHTML = "You clicked option 3."; break; 
                    default: 
                         alert("You must pick an option."); break; 
                } 
            }
        </script> 
        <link rel="stylesheet" href="dropdown.css">
    </body>
</html>
0 голосов
/ 28 января 2020
  • Вы можете использовать литерал объекта для хранения ваших сообщений по значению select.
  • Не использовать встроенный JS. Трудно отлаживать.
  • Использовать addEventListener()
  • Использовать соответствующие элементы ID 

const EL_list = document.querySelector('#list');
const EL_select = document.querySelector('#select');
const EL_response = document.querySelector('#response');
const messages = {
  none: "You must pick an option.", 
  one: "You selected option 1",
  two: "You selected option 2",
  three: "You selected option 3",
};

EL_select.addEventListener('click', evt => {
  const val = EL_list.value;
  const msg = messages[val];
  
  if (val==='none') alert(msg);
  else EL_response.textContent = msg;
});
<div class="dropdown">
  <select name="list" id="list">
    <option value="none">Pick an option</option>
    <option value="one">Option 1</option>
    <option value="two">Option 2</option>
    <option value="three">Option 3</option>
  </select>
  <input id="select" type="button" value="Select">
  <div id="response"></div>
</div>
...