动态使用JS和HTML下拉更改输入标签 [英] Dynamic Drop down change input tag with JS and HTML

查看：199
本文介绍了动态使用JS和HTML下拉更改输入标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有没有一种方法可以根据HTML中的选择列表/下拉列表的值来显示HTML输入元素？所以一旦选择了其中一个下拉值，就会弹出另一个输入标签。我正在寻找的是在选择其中一个值时弹出另一个输入标记，并且基于选择值，它将是某种类型的输入类型标记。



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

 如果下拉值为'playswound'
，则显示输入标签类型=文件
如果下拉值为'saythis'
则显示输入标签类型=文本
如果下拉值为'runco​​mmand'
则显示输入标签类型=文本
如果下拉值为'run program'
则显示输入标签类型=文件

这里是到目前为止我所使用的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'>播放声音< / option>; 
 echo< option value =''>说出这个< / option>; 
 echo< option value =''>运行命令< / option>; 
 echo< option value =''>运行程序< / option>选项>; 
回显< / 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 =其他>其他< / option>'; 
 
 echo'< / select>'; //关闭下拉框
 echo'< input name =speaker_otherid =speaker_othertype =textstyle = display：none/>'; 
 echo'< script type =text / javascript>'。$ scriptTag。'< / script>';

现在我希望能够在每个选项中都有输入标记显示的情况下，但根据选定的值，输入类型会有所不同。

解决方案

这可以通过一些更改来实现： p>


  • 为< select> 添加一个标签，例如< select id =alarm_actionname =alarm_action>

  • em> value来查找选择列表 - 而不是

      var speakerInput = $（'＃speaker'）

    使用

      var alarmInput = $（'＃alarm_action'）;


  • 添加 speaker_other ，可以在HTML中使用一个特定的id的文档/文档/ Web / HTML /元素/输入＃表单_<输入> _typesrel =nofollow noreferrer>文件输入。 em>（例如< input type =fileid =file_input> ）

  • 使用该ID选择文件输入到变更处理程序中（ var file_input = $（'＃file_input'）;

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

      switch（$（this）.val（））{$ b $ case'playsound'：
     case 'runprogram'： 
     //显示文件输入，隐藏文本输入
     break; 
     case'saythis'：
     case'runco​​mmand'：
     //显示文件输入，隐藏文本输入
     break; 
     
     
     
     
     
     
    查看这些更改组合在下面的代码片段中。还请注意这些其他更改： 
     
     
       
       
    • 声音选项已更新，因此value属性为' playsound '，而文件路径将处于不同的属性（即 data-file ） 
       
    • 最后一个选项的无效HTML已从<选项值=''>运行程序< / option>选项> 到< option value ='>运行程序< / 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'runco​​mmand'：speaker_other.show（）; file_input.hide（）;打破; }}）;

    < script src =https： //ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><select name ='alarm_action'id =alarm_actionrequired> < option value =>默认操作< / option> < option value ='playsound'data-file ='/ usr / bin / mpg123'>播放声音< / option> < option value ='saythis'>说这个< / option> < option value ='runco​​mmand'>运行命令< / option> < option value ='runprogram'>运行程序< / option>< / select>< input name =speaker_otherid =speaker_othertype =textstyle =display：none/><<< ; input id =file_inputtype =filestyle =display：none/>


$ b

更新：



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

  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'runco​​mmand'：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_actionrequired> < option value =>默认操作< / option> < option value ='playsound'data-file ='/ usr / bin / mpg123'>播放声音< / option> < option value ='saythis'>说这个< / option> < option value ='runco​​mmand'>运行命令< / option> < option value ='runprogram'> Run Program< / option>< / select>< input name =speaker_otherid =speaker_othertype =textstyle =display：none/>


Is there a way to have an HTML input element show based on the value of a select list/drop-down in HTML? So once one of the drop-down values is selected, then another input tag pops up. What I am looking for is to have another input tag pop up once one of the values are select, and based on the select value, it would be a certain type of input type tag.

I have been able to do it with having an input tag show and hide if a certain value is selected, so then I can use it with PHP in a form tag , but I can not seem to figure out how to get something like this to work. Here is the logic I am trying to accomplish:

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

Here is the HTML I have so far:

$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>";

?>

Here is the JS code I got to work for one option for a dropdown:

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

HTML for JS above:

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

so now I want to be able to have it where every option selected will have an input tag show, but based on the selected value, the input type would be different.

解决方案

This can be achieved with a few changes:

  • Add an id value to the <select> tag e.g. <select id="alarm_action" name="alarm_action">

  • Use that id value to find the select list - instead of 

    var speakerInput = $('#speaker')

    use 

    var alarmInput = $('#alarm_action');

  • Add a file input with a specific id to the HTML, presumably after the text input with id speaker_other (e.g. <input type="file" id="file_input">)
  • Use that id to select the file input in the change handler (var file_input = $('#file_input');

  • Use a switch statement to handle the various cases of values instead of the if statement, since there are multiple option values to consider. Then in various cases (of the switch statement), the file input will be hidden and the text input will be shown, or vice-versa. 

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

See these changes combined in the snippet below. Also note these other changes:

  • the sound option was updated so the value attribute is 'playsound' and the file path will be in a different attribute (i.e. data-file)
  • the invalid HTML of the last option was corrected from <option value=''>Run Program</option>option> to <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" />

UPDATE:

This could actually be simplified, to use only a single input and just change the type attribute on it:

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

这篇关于动态使用JS和HTML下拉更改输入标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆