php - 当使用 PHP 选择值 'other' 时如何显示 HTML 输入字段

Question

我想弄清楚的是，当从下拉菜单中选择 other 的值时，如何让 html input 字段出现。现在，下拉列表的值来自 MySQL DB 查询的结果，该查询有效，但我似乎无法弄清楚如何在选择其他选项时显示输入。

$query = mysql_query("SELECT type FROM Dropdown_Service_Type"); // Run your query

        echo '<select name="service_type">'; // Open your drop down box

        echo '<option value="NULL"></option>';
        // Loop through the query results, outputing the options one by one
        while ($row = mysql_fetch_array($query)) {
         echo '<option value="'.$row['type'].'">'.$row['type'].'</option>';
        }
         echo '<option value="Other">Other</option>';
        echo '</select>';// Close your drop down box

Answer 1

使用 javascript，如下例所示。我们可以添加一个 input字段并默认隐藏它，使用 style 属性: <input name='otherInput' id='otherInput' type="text" style="display: none" />

var otherInput;
function checkOptions(select) {
  otherInput = document.getElementById('otherInput');
  if (select.options[select.selectedIndex].value == "Other") {
    otherInput.style.display = 'block';
    
  }
  else {
    otherInput.style.display = 'none';
  }
}

<select onchange="checkOptions(this)" name="service_type" id="service_type">
  <option value="NULL"></option>
  <option value="43">43</option>
  <!-- other options from your database query results displayed here -->
  <option value="Other">Other</option>
</select>
<!-- the style attribute here has display none initially, so it will be hidden by default -->
<input name='otherInput' id='otherInput' type="text" style="display: none" />

有第 3 方库，如 jQuery 、AngularJS、PrototypeJS 等，可用于通过添加 DOM 操作的快捷方法来简化代码(尽管您应该阅读 this post)。例如，对于 jQuery，使用 .on() (用于事件处理程序绑定(bind))，.show()和 .hide()用于输入显示切换等:

var otherInput;
var serviceTypeInput = $('#service_type');
serviceTypeInput.on('change', function() {
  otherInput = $('#otherInput');
  if (serviceTypeInput.val() == "Other") {
    otherInput.show();
  } else {
    otherInput.hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="service_type" id="service_type">
  <option value="NULL"></option>
  <option value="43">43</option>
  <option value="Other">Other</option>
</select>
<input name='otherInput' id='otherInput' type="text" style="display: none" />