javascript - 选择多个选项会创建多个输入

标签 javascript jquery ajax html-select multiple-select

我在表单中有一个选择字段,允许您选择多个选项。

我需要自动为每个选定的选项创建一个新的输入文本框。

例如,如果您在选择框中选择一个选项,则其下方将出现一个输入。如果您选择 5,则其下方将显示 5 个输入。

我不确定这是否可以直接用 Javascript 来完成,或者我是否需要使用 jQuery 或其他形式的 AJAX 来完成此任务,但我不太确定如何解决这个问题(我对使用 AJAX 还比较陌生)

最佳答案

嗯,jQuery 就是为了这种类型的事情而设计的 - 我建议使用它来避免头痛。

我的看法。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(function()
{
  $('#test')
    .after( '<div id="option-inputs"></div>' )
    .find( 'option' ).each( function()
    {
      var $option = $(this);
      $option
        .data( '$input', $( '<span>' + $option.text() + ': </span><input><br>').appendTo( '#option-inputs' ).hide() )
        .bind( 'toggle-input', function()
        {
          var $input  = $option.data( '$input' );
          if ( $option[0].selected )
          {
            $input.show();
          } else {
            $input.hide();
          }      
        })
        .bind( 'click', function()
        {
          $(this).siblings().andSelf().trigger( 'toggle-input' );
        })
        .trigger( 'toggle-input' )
      ;
    })
  ;
});


</script>

</head>
<body>

<select id="test" multiple="multiple">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

</body>
</html>

关于javascript - 选择多个选项会创建多个输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1307033/

相关文章:

javascript - 系统验证无法使用 jQuery 隐藏表单进行工作

javascript - javascript 代码中的 anchor 标记 onclick 函数

javascript - 通过 AJAX 发送电子邮件 - 显示进度/状态

Javascript - 等待网络 worker 完成?

jquery - Ajax 调用 WebFlow

javascript - 在页面加载时使用 matchMedia 更改 div 位置

javascript - React 中的 "updating"是什么?

javascript - 如何在nodejs中输出 'i'

jquery - Animate.css - 动画文本滑入和滑出

javascript - 禁用使用 jquery 将 HTML 元素添加到 DIV