Question

我正在尝试点击战斗按钮打印"You have slain" + selected option + What I have now works for the first option，但如果您在下拉列表中选择其他选项并点击战斗，它仍会显示Fly。

Fiddle

var mon = document.getElementById('monsters');
var monster =mon.options[mon.selectedIndex].text;

$('#battle').click(function() {
    document.getElementById('dam').innerHTML = "You have hit the " + monster + " for 5 damage";
});

Answer 1

在您的解决方案中，您已全局声明所选值的值，该值仅在文档加载期间设置一次。为了计算正确的值，您必须在按钮单击期间在本地声明它们。

$('#battle').click(function() {
  var mon = document.getElementById('monsters');
  var monster =mon.options[mon.selectedIndex].text;
    document.getElementById('dam').innerHTML = "You have hit the " + monster + " for 5 damage";
});

工作示例：https://jsfiddle.net/DinoMyte/4dyph8jh/5/

Answer 2

<强> Updated fiddle

因为您正在使用jQuery，所以可能只是：

$('#battle').click(function() {
    $('#dam').text("You have hit the " + $('#monsters option:selected').text() + " for 5 damage");
});

希望这有帮助。

从html选择菜单中选择的值

2 个答案: