jQuery启用/禁用显示/隐藏按钮w / SELECT选项。 获取剩余的期权值

我有一个选择列表，使用文本字段中的值填充。 我还有两个按钮：一个添加按钮，用于将输入的值添加到选择列表，还有一个删除按钮，用于从选择列表中删除输入的值。 我想使用jQuery执行以下操作：

1. 如果在选择列表中输入到文本字段中的值不可用，则显示添加按钮并隐藏删除按钮。
2. 如果在选择列表中输入文本字段的值为AVAILABLE ，则隐藏添加按钮并显示删除按钮。
3. 如果选择列表为EMPTY，则显示添加按钮并隐藏删除按钮。

以下是我提出的一些代码：

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

当我添加第一个值时，它会显示删除按钮，但如果我删除了该按钮，则按钮不显示备份。

更新：

好的，我已将其编辑到此。

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

如果我理解正确的问题，我想你想改变这个：

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

对此：

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

这样事件处理程序就会被添加到所有select的选项中，而不仅仅是代码执行时当前选择的选项。 并且还要确保您为任何新创建的项目设置此处理程序。

Answer 3

我对原始问题进行了大量编辑，假设我的编辑是正确的，这是您的问题的解决方案：

XHTML：

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

Answer 4

要获得最佳答案，请尝试以下代码：

使用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($("
").append( "", $("",{class:'add', src:'images/add.png'}).click(function(){add_new();}), $("",{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(""); //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(''+$(this).val()+''); } }); }); }); 

http://www.formget.com/jquery-add-option-to-select/