如果用戶在從數據庫檢索到的下拉菜單中選擇“其他”，則顯示一個文本框

Question

請幫我這個。 如果用戶在下拉菜單中選擇“其他”選項，則無法顯示文本框。 下拉列表中的值來自數據庫。 謝謝！ :)

 <th align="left" height="26" colspan="3"><strong>Return Reason Codes:</strong><span class="select">
      <?php

            echo "<select description='returnreason' type='text' id='returnreason' onchange=' showfield(this.options[this.selectedIndex].value)'>";
            echo '<option id="0">'.'    --Select Return Reason--  '.'</option>';
            $sql = mysql_query("SELECT * FROM preturnreason");
            while($record = mysql_fetch_assoc($sql)) 
                   {
                    echo '<option value=" '.$record['DESCRIPTION'].'">'.$record['DESCRIPTION']. '</option>';

                   }        
            echo '</select>';

         ?> <div id="div1"></div></th>
    </tr>

這是我的JavaScript：

<script type="text/javascript">
function showfield(name){
  if(name=='Other')document.getElementById('div1').innerHTML='Other: <input type="text" name="other" />';
  else document.getElementById('div1').innerHTML='';
}
</script>

Answer 1

    var input = document.createElement('input'); 
input.type = "text"; 
div1.appendChild(input);

堆棧溢出。 LINK 如何在Javascript中動態添加文本框？

Answer 2

您的代碼：

 <?php    $sql = mysql_query("SELECT * FROM preturnreason");?>
<th align="left" height="26" colspan="3"><strong>Return Reason Codes:</strong><span class="select">
<select description='returnreason' id='returnreason' >
    <option value="999">--Select Return Reason--</option>';
   <?php
        while($record = mysql_fetch_assoc($sql)) 
               { ?>
                <option value="<?php echo $record['DESCRIPTION'] ?>"> <?php echo $record['DESCRIPTION'] ?> </option>

            <?php  } ?>
    <option value="0">Other</option>';
</select>

     ?> <div id="myTxt"></div></th>
</tr>

下面是我的示例代碼，如果用戶在下拉菜單中選擇“其他”，該示例代碼將演示如何顯示一個文本框。

的HTML

<select id='sBox' onselect='chkOption()'>
<option value='9'>Select</option>
<option value='0'>Other</option>
<option value='1'>One</option>
</select>

<div id='myTxt' style="display: none">
    <input type='text'>
</div>

jQuery查詢

$('select').on('change', function() {

if( this.value  == '0')
  $("#myTxt").show();
else
    $("#myTxt").hide();
})

現場演示

Answer 3

（根據AP的回答）
如果您想使用純JS（無Jquery），則可以使用以下代碼：

<select id='sBox' onChange='checkchange()'>
    <option value='9'>Select</option>
    <option value='0'>Other</option>
    <option value='1'>One</option>
</select>

<div id='myTxt' style="display: none">
    <input type='text'>
</div>

和Javascript：

function checkchange() {
  if(document.getElementById('sBox').value == '0') {
    document.getElementById('myTxt').style.display='block';
  }
  else {
    document.getElementById('myTxt').style.display='none';
  }
};

Jsfiddle： 在這里

結合到您的代碼：

<th align="left" height="26" colspan="3"><strong>Return Reason Codes:</strong><span class="select">
<select description='returnreason' id='returnreason' onchange=' checkchange()'>
  <option id="0">   --Select Return Reason--  </option>
  <?php
    $sql = mysql_query("SELECT * FROM preturnreason");
    while($record = mysql_fetch_assoc($sql)) {
      echo '<option value=" '.$record['DESCRIPTION'].'">'.$record['DESCRIPTION']. '</option>';
    }
  ?>
  <option value='other'>Other - please specify</option>
</select>
<div id="div1"><input type='text'></div></th>
</tr>

<script>
function checkchange() {
  if(document.getElementById('returnreason').value == 'other') {
    document.getElementById('div1').style.display='block';
  }
  else {
    document.getElementById('div1').style.display='none';
  }
}
</script>