jQuery включить / отключить кнопку показать / скрыть с опциями SELECT. Получить оставшиеся значения опций

Question

У меня есть список выбора, который заполняется с использованием значений из текстового поля. У меня также есть две кнопки: кнопка добавления, которая добавляет введенное значение в список выбора, и кнопка удаления, которая удаляет введенное значение из списка выбора. Я хотел бы сделать следующее с помощью jQuery:

1. Если значение, введенное в текстовое поле, равно НЕ ДОСТУПНО в списке выбора, показать кнопку добавления и скрыть кнопку удаления.
2. Если значение, введенное в текстовое поле, равно ДОСТУПНО в списке выбора, скрыть кнопку добавления и показать кнопку удаления.
3. Если выбран список ПУСТО показать кнопку добавления и скрыть кнопку удаления.

Вот код, который я придумал:

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

Показывает кнопку удаления, когда я добавляю первое значение, но если я удаляю значение, кнопка не отображается снова.

UPDATE:

Хорошо, я отредактировал это.

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

все еще не скрывает кнопку, когда в SELECT нет значения. Пробовал и с опцией.

Answer 1

Я полагаю, что вы можете проверить, является ли длина параметра> 0, говоря, что он имеет значения, а если нет, то он не существует, то есть он не имеет значений, например:

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

Answer 2

Для лучшего ответа, попробуйте следующий код:

Добавить параметры для выбора тега с помощью 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/

Answer 3

Я сделал серьезное редактирование исходного вопроса, предполагая, что мое редактирование правильное, вот решение вашей проблемы:

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 (предполагается структура документа выше):

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

Если я правильно понимаю проблему, я думаю, вы хотите изменить это:

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

к этому:

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

, чтобы обработчик событий добавлялся ко всем опциям выбора, а не только к выбранному в данный момент при выполнении кода. А также убедитесь, что вы настраиваете этот обработчик для всех вновь создаваемых элементов.