jQuery enable/disable show/hide button w/ SELECT options. Get remaining option values

Question

I have a select list which is being populated using the values from a text field. I also have two buttons: an add button which adds the entered value to the select list and a remove button which removes the entered value from the select list. I would like to do the following using jQuery:

1. If the value entered into the text field is NOT AVAILABLE in the select list, show the add button and hide the remove button.
2. If the value entered into the text field is AVAILABLE in the select list, hide the add button and show the remove button.
3. If the select list is EMPTY show the add button and hide the remove button.

Here is some code I've come 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();
   });

It shows the remove button when I add the first value, but if I remove the value the button doesn't show back up.

UPDATE:

Okay I have edited it to this.

$('#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 not hiding the button when no value in the SELECT. Tried it with the option as well.

Answer 1

I believe you can check to see if the option length is >0 saying that it has values and if not then it doesn't exist meaning it doesn't have values like so:

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

Answer 2

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

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

to this:

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

so that the event handler gets added to all the select's options, not just the currently selected one when the code executes. And also make sure you're setting up this handler for any newly-created items, as well.

Answer 3

I made a heavy edit of the original question, assuming my edit is correct, here is a 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 above 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>');
  });

});