jQuery activer ou désactiver afficher/masquer bouton avec options de sélection. Obtenir les valeurs des options restantes

J'ai une liste de sélection qui est remplie en utilisant les valeurs d'un champ de texte. J'ai également deux boutons : un bouton Ajouter qui ajoute de la valeur de l'entrée à la liste de sélection et d'un bouton de suppression qui supprime la valeur de l'entrée de la liste de sélection. Je tiens à faire ce qui suit à l'aide de jQuery :

  1. Si la valeur entrée dans le champ de texte n'est pas disponible dans la liste select, montrent le bouton Ajouter et masquer le bouton Supprimer.
  2. Si la valeur entrée dans le champ de texte est disponible dans la liste select, masquer le bouton Ajouter et afficher le bouton Supprimer.
  3. Si la liste de sélection est vide afficher le bouton Ajouter et masquer le bouton Supprimer.

Voici un code que j'ai trouver :

// Remove selected options
$('#removeButton').click(function() {
   //$.map($('#addedchargeamtid :selected'), function(e) {
   $.map($('#addedchargeamtid option'), function(e) {
      var exp = $(e).text();
      // Would like to have all the Option values in CVS format 0.00,1.99, etc...
      // If removed this should also remove the value in the array
   })

   $('#removeButton').hide();
      return !$('#addedchargeamtid :selected').remove();
   });

   // Add charge amount
   $('#addedchargeamtid option:selected').focus(function() {
      $('#removeButton').show();
   });

Il montre le bouton Supprimer lorsque j'ajoute la valeur première, mais si j'enlève la valeur n'affiche pas le bouton Sauvegarder.

MISE À JOUR :

OK j'ai édité il à cela.

$('#removeButton').click(function() {
   $('#addedchargeamtid :selected').remove();

   $.map($('#addedchargeamtid option'), function(e) {
      var exp = $(e).text();
      alert(exp); // Need this in CSV format but I think it displays the correct values
   })

   //if($("#addedchargeamtid option").length > 0) {  <-- Didn't work    			
   if($("#addedchargeamtid").length > 0) {
      $('#removeButton').show();
   } else {
      $('#removeButton').hide();
   }
});

toujours ne pas cacher le bouton lorsque aucune valeur pour la sélectionner. Il a essayé avec l'option ainsi.

répondre #1

Je crois que vous pouvez vérifier pour voir si la durée de l'option est > 0 disant qu'il a des valeurs et si pas alors il n'existe pas ce qui signifie qu'il n'a pas les valeurs comme suit :

if($("#addedchargeamtid option").length > 0 ) //if addedchargeamtid is the id of select tag
{
   $('#removeButton').show();
}
else
{
  $('#removeButton').hide();
}
répondre #2

Si je comprends bien le problème, je pense que vous voulez changer cela :

// Add charge amount
$('#addedchargeamtid option:selected').focus(function() {
   $('#removeButton').show();
});

pour cela :

// Add charge amount
$('#addedchargeamtid option').focus(function() {
   $('#removeButton').show();
});

pour que le gestionnaire d'événements est ajouté aux options de sélection, non seulement le celui actuellement sélectionné lorsque le code s'exécute. Et assurez-vous également que vous configurez ce gestionnaire d'événements pour tout nouvellement créé articles, aussi bien.

répondre #3

J'ai fait une version lourde de la question originale, en supposant que mon edit est correcte, Voici une solution à votre problème :

XHTML :

<input type="text" id="textField" />
<input type="button" id="addButton" value="Add" />
<input type="button" id="removeButton" value="Remove" />
<select multiple="multiple" id="selectList">
</select>

JavaScript (suppose plus haut de la structure du document) :

$(function(){

  $("#textField").keypress(function(){

    var val = $(this).val();

    if (val === '') {
      return;
    }

    // Clear selections
    $("#selectList option").removeAttr("selected");

    // Value not in select list
    if ($("#selectList option").length === 0 || $("#selectList option[value="+val+"]").length === 0) {
      $("#removeButton").hide();
      $("#addButton").show();

    // Value in select list
    } else {
      $("#removeButton").show();
      $("#addButton").hide();

      // Select it
      $("#selectList option[value="+val+"]").attr("selected", "selected");
    }
  });

  $("#removeButton").click(function(){
    var val = $("#textField").val();
    val !== '' && $("selectList option[value="+val+"]").remove();
  });

  $("#addButton").click(function(){
    var val = $("#textField").val();
    val !== '' && $("#selectList").append('<option value="'+val+'" label="'+val+'">'+val+'</option>');
  });

});

Tags lesen

   
 
logo_banner