Question

有没有办法根据HTML中选择列表/下拉列表的值显示HTML输入元素？因此，一旦选择了其中一个下拉值，就会弹出另一个输入标记。我要找的是在选择其中一个值后弹出另一个输入标签，并根据选择值，它将是某种类型的输入类型标签。

我已经能够通过输入标签显示并隐藏如果选择了某个值，那么我就可以在表单标签中使用PHP，但我似乎无法弄清楚如何获取某些内容像这样工作。这是我想要实现的逻辑：

if dropdown value is 'playswound'
    then show input tag type=file
if dropdown value is 'saythis'
    then show input tag type=text
if dropdown value is 'runcommand'
    then show input tag type=text
if dropdown value is 'run program'
    then show input tag type=file

这是我到目前为止的HTML：

$default_select="Default Action";

echo "<select name='alarm_action' required>";
echo    "<option value=$default_select>$default_select</option>";
echo    "<option value='/usr/bin/mpg123'>Play Sound</option>";
echo    "<option value=''>Say This</option>";
echo    "<option value=''>Run Command</option>";
echo    "<option value=''>Run Program</option>option>";
echo "</select>";

?>

这是我为下拉列表中的一个选项工作的JS代码：

    $scriptTag = "
        var speakerInput = $('#speaker');
        speakerInput.on('change', function() {
        speaker_other = $('#speaker_other');
        if (speakerInput.val() == 'Other') {
                speaker_other.show();
        } else {
             speaker_other.hide();
         }
    });";

以上JS的HTML：

        echo '<option value="Other">Other</option>';

        echo '</select>';// Close your drop down box
        echo '<input name="speaker_other" id="speaker_other" type="text" style="display: none" />';
        echo '<script type="text/javascript">'.$scriptTag.'</script>';

所以现在我希望能够在选择的每个选项都显示输入标签的位置，但根据所选的值，输入类型会有所不同。

Answer 1

这可以通过一些改变来实现：

将 id 值添加到<select>标记，例如<select id="alarm_action" name="alarm_action">

使用 id 值查找选择列表 - 而不是

var speakerInput = $('#speaker')

使用

var alarmInput = $('#alarm_action');

向HTML添加具有特定ID的file input，可能是在输入了带有 speaker_other 的文本后（例如<input type="file" id="file_input">）
使用该ID选择更改处理程序中的文件输入（var file_input = $('#file_input');

使用switch statement处理各种值的情况，而不是 if 语句，因为需要考虑多个选项值。然后在各种情况下（switch语句），文件输入将被隐藏，文本输入将被显示，反之亦然。

switch ($(this).val()) {
    case 'playsound':
    case 'runprogram':
         //show file input, hide text input
         break;
    case 'saythis':
    case 'runcommand':
         //show file input, hide text input
         break;
}

请参阅下面的代码段中的这些更改。另请注意以下其他更改：

声音选项已更新，因此值属性为＆＃39; playound ＆＃39;并且文件路径将使用不同的属性（即 data-file ）
最后一个选项的无效HTML已从<option value=''>Run Program</option>option>更正为<option value=''>Run Program</option>

＆＃13;

var alarmInput = $('#alarm_action');
alarmInput.on('change', function() {
  var speaker_other = $('#speaker_other');
  var file_input = $('#file_input');
  //this == alarmInput within this change handler
  switch ($(this).val()) {
    case 'playsound':
    case 'runprogram':
      speaker_other.hide();
      file_input.show();
      break;
    case 'saythis':
    case 'runcommand':
      speaker_other.show();
      file_input.hide();
      break;
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name='alarm_action' id="alarm_action" required>
    <option value="">Default Action</option>
    <option value='playsound' data-file='/usr/bin/mpg123'>Play Sound</option>
    <option value='saythis'>Say This</option>
    <option value='runcommand'>Run Command</option>
    <option value='runprogram'>Run Program</option></select>
<input name="speaker_other" id="speaker_other" type="text" style="display: none" />
<input id="file_input" type="file" style="display: none" />

＆＃13;

更新

这实际上可以简化，只使用一个输入，只需更改 type 属性：

＆＃13;

var alarmInput = $('#alarm_action');
alarmInput.on('change', function() {
  var speaker_other = $('#speaker_other');
  speaker_other.show();
  switch ($(this).val()) {
    case 'playsound':
    case 'runprogram':
      speaker_other.attr('type', 'file');
      break;
    case 'saythis':
    case 'runcommand':
      speaker_other.attr('type', 'text');
      break;
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name='alarm_action' id="alarm_action" required>
    <option value="">Default Action</option>
    <option value='playsound' data-file='/usr/bin/mpg123'>Play Sound</option>
    <option value='saythis'>Say This</option>
    <option value='runcommand'>Run Command</option>
    <option value='runprogram'>Run Program</option></select>
<input name="speaker_other" id="speaker_other" type="text" style="display: none" />

＆＃13;

Answer 2

以下是您问题的解决方案：

onclick

的jsfiddle： https://jsfiddle.net/kt8wLx2y/4/

使用JS和HTML动态下拉更改输入标记

2 个答案:

更新