2009-08-24 9 views
1

J'ai reçu de l'aide précédente pour un problème, obtenant un formulaire de sélection d'option multiple pour créer de nouvelles entrées, en fonction du nombre sélectionné. Le code ci-dessous est ce qui a fini par travailler pour moi (le crédit va à Peter Bailey)jQuery déclenche dans un formulaire

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

Je ne sais pas jQuery donc j'ai besoin d'aide avec un dernier coup sec. Je dois être en mesure de limiter les options sélectionnées créer de nouvelles boîtes. Ainsi, si une option de valeur -1 ou 0 est sélectionnée, une nouvelle zone de texte n'est pas créée. Tout le reste fait.

De même, existe-t-il un moyen de faire en sorte que d'autres formulaires de sélection déclenchent cette mise à jour? En javascript régulier, vous utiliseriez onChange = "" et une fonction pour le mettre à jour. La raison en est que la table de sélection est remplie dynamiquement, en fonction de l'entrée de la table de sélection précédente. Si vous revenez en arrière et modifiez la table de sélection précédente, elle ne met pas à jour jQuery, les entrées précédentes restent.

Merci pour l'aide!

Répondre

0

Vous aurez besoin de mettre en place pour la <select>, une routine de « initilization » de sorte que lorsqu'il reçoit de nouvelles options, il peut re-configurer le lié contributions.

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

Je pense que c'est un peu plus que ce que je voulais. Tout ce que je veux, c'est que le "changeur" ​​sélectionne pour effacer les entrées nouvellement créées s'il y a un changement. Par exemple, si je sélectionne quelque chose dans la sélection de test et qu'une nouvelle entrée est créée, revenir en arrière et sélectionner quelque chose dans le changeur enlèvera cette nouvelle entrée, puis la créera à nouveau si je sélectionne de nouveau quelque chose dans la sélection de test. –

+0

Il me manque vraiment quelque chose, car au mieux je peux dire à partir de votre description, c'est exactement ce que cela fait. –

0

Une solution rapide et simple serait de vérifier la valeur en haut de votre appel de fonction .each, et si elle est 0 ou -1, le retour (qui fonctionne comme un break dans une boucle .each).

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

Et votre code tout:

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