JQuery enable / disable the show / hide w / SELECT button. Get remaining option values

Question

I have a select list that is populated using values ​​from a text box. I also have two buttons: an add button that adds the entered value to the selection list and a delete button that removes the entered value from the selection list. I would like to do the following using jQuery:

• If the value entered in the text box is NOT AVAILABLE in the selection list, show the add button and hide the delete button.
• If the value entered in the text box is AVAILABLE in the selection list, hide the add button and show the delete button.
• If the EMPTY selection list shows the add button and hides the delete button.

Here is the code I came up with:

// 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(); }); 

The delete button is shown when I add the first value, but if I delete the value, the button will not display a backup.

UPDATE:

Ok, I edited it.

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

still does not hide the button when there is no value in SELECT. I also tried the option.

Answer 1

I believe that you can check if the option length is> 0, that it matters, and if not, then it does not exist, because it does not have such values:

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

Answer 2

If I understood the problem correctly, I think you want to change this:

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

:

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

so that the event handler is added to all the selection parameters, and not just the one currently selected when executing the code. And also make sure that you configure this handler for any newly created items.

Answer 3

I did a hard edit of the original question, assuming my edit is correct, here is the solution to your problem:

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 (assumes document structure):

 $(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

For a better answer, try under the code:

Add tag selection options using 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/