Question

我开始学习DOM，我只想测试一些东西，我创建了下拉列表，我想根据选择显示数据。我不知道我是否写得正确。

提前感谢您的帮助。

var show = document.getElementById("show");
var select = document.getElementById("select");
if(select == "Boots"){
  var newContent = document.createTextNode("You selected Boots");
  show.appendChild(newContent);
}
else if(select == "Socks"){
  var newContent2 = document.createTextNode("You selected Socks");
  show.appendChild(newContent2);
}
else{
  var newContent2 = document.createTextNode("You selected Tie");
  show.appendChild(newContent2);
}

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
  <div class="container">
  <p class="lead">Please Choose one in the following</p>
 <form>
<select class="custom-select" id="select">
  <option class="active">Choose one...</option>
<option>Boots</option>
<option>Socks</option>
<option>tie</option>
</select>
  </form><br>
<p id="show" class="lead">

</p>
  </div>
</body>

Answer 1

您需要将代码包装在io.on('connection', ...)事件处理程序中，以便每次选择更改时代码都会运行。然后，每次选择更改时都不需要继续追加子节点，只需设置onchange元素的innerHTML即可。除非您将show视为默认值，否则您可能需要检查该值：

然后您需要正确获取所选项目的值。一种方法是"tie"，它将获取所选select.options[select.selectedIndex].text元素的文本值。

option

var show = document.getElementById("show");
var select = document.getElementById("select");

select.onchange = function(){
  value = select.options[select.selectedIndex].text;
  if(value == "Boots"){
    show.innerHTML = "You selected Boots";
  }
  else if(value == "Socks"){
    show.innerHTML = "You selected Socks";
  }
  else if(value == "tie"){
    show.innerHTML = "You selected Tie";
  }
  else {
    show.innerHTML = "";
  }
}

Answer 2

您可以向下拉列表添加事件侦听器，并在每次所选值更改时触发函数。可以使用此功能替换显示的文本。请尝试下面的代码。

var show = document.getElementById("show");
var select = document.getElementById("select");

select.addEventListener('change', function() {
  show.innerHTML = "You selected " + this.value;
});

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <p class="lead">Please Choose one in the following</p>
    <form>
      <select class="custom-select" id="select">
  <option class="active">Choose one...</option>
<option value="Boots">Boots</option>
<option value="Socks">Socks</option>
<option value="tie">tie</option>
</select>
    </form><br>
    <p id="show" class="lead">

    </p>
  </div>
</body>

我已将value个属性添加到<option>标记中，以便可以在代码中轻松检索值。在这种情况下，您不需要代码中的if..else if语句。

Answer 3

你可以试试这个。

＆＃13;

function change(){
    var show = document.getElementById("show");
    var select = event.target.value;
    var newContent = "You selected "+ select;
    show.innerHTML = newContent;
}

＆＃13;

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
  <div class="container">
  <p class="lead">Please Choose one in the following</p>
 <form>
<select class="custom-select" id="select" onchange="change()">
  <option class="active">Choose one...</option>
<option>Boots</option>
<option>Socks</option>
<option>tie</option>
</select>
  </form><br>
<p id="show" class="lead">

</p>
  </div>
</body>

＆＃13;

显示选择数据

3 个答案: