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 e 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.

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 e 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.

• javascript
• jquery
• dhtml

• what do you mean the button doesn't show back up?in last sentance – TStamper Commented May 18, 2009 at 21:18
• From what I understand you want to show the button if values exist and hide the button if values don't exist? – TStamper Commented May 18, 2009 at 21:19
• is "addedchargeamtid" the id name of your select tag? – TStamper Commented May 18, 2009 at 22:17
• yes addedchargeamtid is the id – Phill Pafford Commented May 18, 2009 at 22:22
• then what you have will not work for what is intended beceause what that if statement does is test if the selector exist, and since you are referring to the select tag instead of the select options tag then it will always show – TStamper Commented May 18, 2009 at 22:49

4 Answers 4

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

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.

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

});

For best answer, Try below code :

Add Options to Select Tag 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./jquery-add-option-to-select/