如何获取 pug 文件中下拉列表的值？

Question

我有一个 pug 文件，它动态填充对象（客户）列表的下拉列表，但我似乎无法获得当前从中选择的值。这是代码：

select(name="customerDropdown", id="customerDropdown" class="btn btn-success dropdown-toggle")
    each customer in customers 
      option=customer

  script.
    var el = document.getElementById('customerDropdown');
    var strCustomer = el.options[el.selectedIndex].text;

strCustomer 在此之后似乎没有任何价值。感谢任何帮助！

Answer 1

请尝试下面的代码，看看它在你这边是如何工作的：

- var customers = ['John','Maria','Nicolas']
select(name="customerDropdown", id="customerDropdown" class="btn btn-success dropdown-toggle")
    each customer in customers 
      option=customer
  
script.
  var $customerDropdown = document.getElementById('customerDropdown');
  
  var getSelectedCustomer = function() {
    return $customerDropdown.options[$customerDropdown.selectedIndex].text
  }
  
  $customerDropdown.addEventListener('change', function(event) {
    alert('new value: ' + getSelectedCustomer())
  });
  
  alert(getSelectedCustomer())

它应该在启动应用程序时提醒 select 框中的第一个值 (John)，稍后当您更改 select 选项时 - 它应该提醒 select编辑了一个。例如。如果你 select Nicolas 它应该提醒 (new value: Nicolas)

希望这能让您了解如何处理 select 元素。

如何获取 pug 文件中下拉列表的值？

How do I get the value of a dropdown in a pug file?

html

javascript

pug