jQuery activer/désactiver le bouton afficher/masquer avec les options SELECT. Obtenir les valeurs d'option restantes

Question

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

1. Si la valeur est entrée dans le champ texte est NON DISPONIBLE dans la liste de sélection, afficher le bouton Ajouter et cacher le bouton Supprimer.
2. Si la valeur saisie dans le champ de texte est DISPONIBLE dans la liste de sélection, masquez le bouton Ajouter et affichez le bouton Supprimer.
3. Si la liste de sélection est EMPTY affiche le bouton Ajouter et masque le bouton Supprimer.

Voici un code que je suis venu avec:

// 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 quand j'ajoute la première valeur, mais si je retire la valeur sur le bouton ne montre pas de sauvegarde .

MISE À JOUR:

D'accord, je l'ai éditée à ce sujet.

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

ne cache toujours pas le bouton lorsqu'aucune valeur n'est sélectionnée dans le SELECT. Je l'ai essayé avec l'option aussi.

Answer 1

Je crois que vous pouvez vérifier pour voir si la longueur de l'option est> 0 dire qu'il a des valeurs et sinon il n'existe pas ce qui signifie qu'il n'a pas des valeurs comme ceci:

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

Answer 2

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

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

à ceci:

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

si que le gestionnaire d'événements est ajouté à toutes les options de la sélection, pas seulement celle qui est actuellement sélectionnée lorsque le code est exécuté. Et assurez-vous également de configurer ce gestionnaire pour tous les éléments nouvellement créés.

Answer 3

J'ai fait une modification lourde de la question initiale, en supposant mon édition 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 (ci-dessus suppose 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>'); 
    }); 

}); 

Answer 4

Pour une meilleure réponse, Essayez ci-dessous le code:

Ajouter Optio ns pour sélectionner Tag utilisant Jquery

$(document).ready(function(){ 

//Function To Add or Remove New Option Field in Form 
var i=2; 
$(".add").on("click", function add_new(){ 
$(".more").append($("<p/>").append(
"<input type='text' id='option"+i+"' placeholder='option"+i+"'/>", 
$("<img/>",{class:'add', src:'images/add.png'}).click(function(){add_new();}), 
$("<img/>",{class:'del', src:'images/del.png'}).click(function(){$(this).parent().remove();}) 
)) 
i=i+1; 
}); 

//Below Function Executes on Click of create select Button 
$("#button").on("click",function(){ 

//To Clear Previous Select Option Field if Exists in Div 
$("#prm").empty(); 

//Creating Select Option in Div 
$("#prm").append("<select></select>"); 

//Creating Options and Adding it To Above Select Tag 
$("input[type=text]").each(function(){ 
if($(this).val()==""){ 
alert($(this).attr('id')+" is Empty !"); 
} 
else{ 
$("select").append('<option>'+$(this).val()+'</option>'); 
} 
}); 

}); 

}); 

http://www.formget.com/jquery-add-option-to-select/