用PHP选择值"other"时如何显示HTML输入字段 [英] How to have an HTML input field appear when the value 'other' is selected with PHP

问题描述

我要弄清楚的是，当从下拉菜单中选择 other 的值时，如何显示html input 字段.现在，下拉列表的值来自MySQL DB查询的结果，该查询有效，但是我似乎无法弄清楚如何在选择另一个选项时显示输入内容.

What I am trying to figure out is how to have an html input field appear when the value of other is selected from a dropdown menu. Right now the values for the dropdown list are coming from the results of a MySQL DB query, which works, but I can not seem to figure out how to get an input to appear when I select the other option.

$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

推荐答案

使用javascript，如以下示例所示.我们可以添加输入字段并将其隐藏默认情况下，使用 style 属性:<输入名称='otherInput'id ='otherInput'type ="text" style ="display:none"/>

Use javascript, like in the example below. We can add an input field and have it hidden by default, using the style attribute: <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" />

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

There are 3rd party libraries like jQuery, AngularJS, PrototypeJS, etc., which can be used to make the code simpler by adding shortcut methods for DOM manipulation (though you should read this post). For example, with jQuery, using .on() (for the event handler binding), .show() and .hide() for the input display toggling, etc:

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" />

这篇关于用PHP选择值"other"时如何显示HTML输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！