Question

我正在为我工作场所的一些人写一个简单的工具。我试图根据从html选择元素中选择的选项值运行不同的函数。我被卡住了...请不要笑。刚回到编码3周前。我希望这个工作是用户点击下拉菜单...选择一个选项...然后要求添加额外的输入然后将一些预定义文本添加到文本区域。然后菜单重置。请尽可能简单地回答。

<!-- BEGIN ROUTING DROPDOWN MENU -->

  <select id="routingdropdownmenu">
  <option value="">MAKE A SELECTION</option>
  <option value="1">ROUTE TO STORE</option>
  <option value="2">ROUTE TO WAREHOUSE...</option>
  <option value="2">CANCEL SHIPPING</option>
  <script>
  var mytextbox = document.getElementById('REMARKSTEXTAREA');
  var mydropdown = document.getElementById('routingdropdownmenu');
  mydropdown.onclick = function(){
  var INVOICE = prompt("WHAT IS THE INVOICE NUMBER?");  
  if (INVOICE != null) {
  if (mydropdown = 1) {
  mytextbox.value = mytextbox.value + " ROUTING INVOICE " + INVOICE + " TO       STORE ";}
  else
  if (mydropdown = 2) {
  mytextbox.value = mytextbox.value + " ROUTING INVOICE " + INVOICE + " TO    WAREHOUSE ";}
  else
  if (mydropdown = 3) {
  mytextbox.value = mytextbox.value + "CANCELLING SHIPMENT";}
  this.value = "";
  </script> 
  </select>

<!-- END ROUTING DROPDOWN MENU -->

Answer 1

您遗失了ID为REMARKSTEXTAREA
您需要绑定onchange函数而不是onclick
您需要使用mydropdown.value来获取所选值
您需要使用==而不是=来执行切换。

HTML

<input id="REMARKSTEXTAREA" />
<select id="routingdropdownmenu">
    <option value="">MAKE A SELECTION</option>
    <option value="1">ROUTE TO STORE</option>
    <option value="2">ROUTE TO WAREHOUSE...</option>
    <option value="3">CANCEL SHIPPING</option>
</select>

的javascript

var mytextbox = document.getElementById('REMARKSTEXTAREA');
var mydropdown = document.getElementById('routingdropdownmenu');
mydropdown.onchange = function(){
var INVOICE = prompt("WHAT IS THE INVOICE NUMBER?");  
if (INVOICE != null) {
   if (mydropdown.value == 1) {
        mytextbox.value = mytextbox.value + " ROUTING INVOICE " + INVOICE + " TO       STORE ";
    }
   else  if (mydropdown.value == 2) {
   mytextbox.value = mytextbox.value + " ROUTING INVOICE " + INVOICE + " TO    WAREHOUSE ";
   }
   else  if (mydropdown.value == 3) {
    mytextbox.value = mytextbox.value + "CANCELLING SHIPMENT";
    }
   }
 }

Answer 2

如果你不太了解这部分内容，那么在真实的工作环境中这真的有用吗？

无论如何，change事件将触发select的事件处理程序。事件处理程序只接受文本输入中的输入，并将提示输入一个输入或单击取消按钮，在这种情况下它将一起退出。

使用开关和select的selectedIndex确定输出元素中打印的内容。

段

＆＃13;

var text = document.getElementById('invNum');
var menu = document.getElementById('routeMenu');
menu.addEventListener('change', function(e) {
  var INVOICE = text.value;
  while (INVOICE == 'undefined' || INVOICE == '' || INVOICE == null) {
    if (INVOICE == null) {
      return false;
    } else {
      INVOICE = prompt("Enter Invoice Number First");
    }
  }

  var out = document.getElementById('out');
  var opt = menu.selectedIndex;
  switch (opt) {
    case 1:
      out.textContent = " ROUTING INVOICE " + INVOICE + " TO       STORE ";
      break;
    case 2:
      out.textContent = " ROUTING INVOICE " + INVOICE + " TO    WAREHOUSE ";
      break;
    case 3:
      out.textContent = "CANCELLING SHIPMENT";
    default:
      return false;
  }

}, false);

＆＃13;

<fieldset>
  <legend>Route Menu</legend>
  <label>Invoice Number
    <input id='invNum'>
  </label>
  <select id="routeMenu">
    <option value="">Select Option</option>
    <option value="1">Route to Store</option>
    <option value="2">Route to Wharehouse</option>
    <option value="3">Cancel Shipping</option>
  </select>
  <br/>
  <br/>
  <output id='out'></output>
</fieldset>

＆＃13;

如何使用javascript从select元素运行多个函数

2 个答案:

段