表单中的 jQuery 触发器答案

【问题标题】：jQuery triggers in a form表单中的 jQuery 触发器
【发布时间】：2009-08-24 20:46:08
【问题描述】：

我之前收到过一个问题的帮助，获得了一个多选项选择表单来创建新输入，具体取决于选择了多少。下面的代码最终为我工作（归功于Peter Bailey）

<!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>

我不知道 jQuery，所以我需要帮助进行最后一个调整。我需要能够限制选择的选项创建新框。因此，如果选择了值 -1 或 0 的选项，则不会创建新的文本框。别的什么都行。

还有什么方法可以让其他选择表单触发此更新？在常规 javascript 中，您将使用 onChange="" 和一个函数来更新它。这样做的原因是，选择表是根据前一个选择表的输入动态填充的。如果您返回并更改之前的选择表，它不会更新 jQuery，之前的输入仍然存在。

感谢您的帮助！

【问题讨论】：

标签： jquery forms triggers html-select

【解决方案1】：

您需要为<select> 设置一个“初始化”例程，以便当它接收到新选项时，它可以重新设置链接的输入。

<!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()
{
  //  How you manage this data is up to you, this is just an example
  var optionData = {
      1: { 1: "1.1", 2: "1.2", 3: "1.3" }
    , 2: { 1: "2.1", 2: "2.2", 3: "2.3" }
  }
  var $test = $('#test');

  $test.bind( 'init', function()
  {
    $optionInputs = $( '#option-inputs' );
    if ( !$optionInputs.length )
    {
      $optionInputs = $( '<div id="option-inputs"></div>' ).insertAfter( $test );
    }
    $optionInputs.children().remove();
    $test.find( 'option' ).each( function()
    {
      var $option = $(this);
      $option
        .data( '$input', $( '<span>' + $option.text() + ': </span><input><br>').appendTo( $optionInputs ).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' )
      ;
    });
  });

  $('#changer').bind( 'change', function()
  {
    var $this = $(this)
      , options = optionData[$this.val()]
      , optionHtml = '';
    ;

    for ( var i in options )
    {
      if ( options.hasOwnProperty( i ) )
      {
        optionHtml += '<option value="' + i + '">' + options[i] + '</option>';
      }
    }
    $test.html( optionHtml ).trigger( 'init' );
  }).trigger( 'change' );
});


</script>

</head>
<body>

<select id="changer">
  <option value="1">Set 1</option>
  <option value="2">Set 2</option>
</select>

<select id="test" multiple="multiple">
</select>

</body>
</html>

【讨论】：

我认为这比我想要的要多一点。我想要的只是“更改器”选择以清除新创建的输入（如果对其进行了更改）。例如，如果我在测试选择中选择了某些内容，并创建了一个新输入，则返回并在更改器中选择某些内容将删除该新输入，然后如果我在测试选择中再次选择某些内容，则再次创建它。
我真的错过了一些东西，因为我从你的描述中可以看出，这正是它的作用。

【解决方案2】：

一个快速简单的解决方案是检查 .each 函数调用顶部的值，如果它是 0 或 -1，则返回（其工作方式类似于 .each 循环中的 break）。

if ($option.attr('value') == 0 || $option.attr('value') == -1) return;

对于您的整个代码：

$(function()
{
  $('#test')
    .after( '<div id="option-inputs"></div>' )
    .find( 'option' ).each( function()
    {
      var $option = $(this);
      //new code
      if ($option.attr('value') == 0 || $option.attr('value') == -1) return;

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

【讨论】：