javascript - 使用 JS 和 HTML 动态下拉更改输入标签

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');
  

• 添加 file input在 HTML 中使用特定的 id，大概是在 id 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;
  }
  

在下面的代码片段中查看这些更改的组合。另请注意以下其他更改:

• 声音选项已更新，因此值属性为“playsound”，文件路径将位于不同的属性中(即数据文件)
• 最后一个选项的无效 HTML 已从 <option value=''>Run Program</option>option> 更正至<option value=''>Run Program</option>

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;
  }
});

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

更新:

这实际上可以简化，仅使用单个输入并仅更改其上的 type 属性:

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;
  }
});

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