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 re

Answer 1

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

});

Answer 2

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 3

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 4

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.com/jquery-add-option-to-select/