從下拉菜單中選擇一個屬性後，自定義文本自動填充文本字段

Question

我需要一些幫助，爲這個腳本。這是我從其他地方得到的腳本，我想添加一個功能，但我真的被卡住了。這是腳本：

  <select name="order_status_id"> 
      <?php foreach ($order_statuses as $order_statuses) { ?> 
      <?php if ($order_statuses['order_status_id'] == $order_status_id) { ?> 
      <option value="<?php echo $order_statuses['order_status_id']; ?>" selected="selected"><?php echo $order_statuses['name']; ?></option> 
      <?php } else { ?> 
      <option value="<?php echo $order_statuses['order_status_id']; ?>"><?php echo $order_statuses['name']; ?></option> 
      <?php } ?> 
      <?php } ?> 
      </select> 
     </td> 
     </tr> 
     <tr> 
     <td><?php echo $entry_notify; ?></td> 
     <td><input name="notify" type="checkbox" value="1" checked="checked" /></td> 
     </tr> 
     <tr> 
     <td><?php echo $entry_comment; ?></td> 
     <td><textarea name="comment" cols="40" rows="8" style="width: 99%"></textarea> 

我想在我從下拉菜單中選擇一個名稱後自動填充文本框。 例如在下拉列表框我選擇了狀態「處理」，則文本框下方將自動填寫「我們正在處理您的請求，請等待X天，我們會盡快通知你。」

因此，當我選擇另一個狀態「取消」時，文本字段會將其內容更改爲「我們已取消您的請求」。等等..

請告訴我，如果我的描述不夠清楚。事先謝謝你。

Answer 1

您可以添加一個JavaScript函數，會做什麼，你在這樣的onchange事件的選擇框的需要：

<select id="order_status_id" name="order_status_id" onchange="updateTextBox()"> 
<textarea id="comment" name="comment" cols="40" rows="8" style="width: 99%"></textarea> 

我也加入id值，這兩個元素，所以我們可以很容易地getElementById選擇它們

每次更改選擇時都會觸發此事件。然後，您可以實現一個簡單的JavaScript函數updateTextBox()將更新文本框爲您提供：

function updateTextBox() { 
    var orderStatusSelect = document.getElementById("order_status_id"); 
    var status = orderStatusSelect.options[orderStatusSelect.selectedIndex].text; 
    var myTextBox = document.getElementById("comment"); 

    if(status == "Processing") { 
     //set the value of the text box 
     myTextBox.value = "We are now processing your request. Please wait for X days and we would inform you shortly." ; 
    } else if(status == "Cancelled") { 
     myTextBox.value = "We have cancelled your request!"; 
    } else if(status == "OtherStatus") { 
     myTextBox.value = "another message goes here!"; 
    } 
    //and so on for all different options 
} 

正在運行的例子來看看這個jsFiddle。