Question

我只是尝试使用以下代码添加和删除选择框项目

 $('#moveforzero').val("0");  

$('#SelectFeatures').change(function() {

            var oSrc = document.getElementById('SelectFeatures');

            var oDest = document.getElementById('SelectedFeatures');

            var zero = document.getElementsByName('moveforzero')[0].value;


            for (var i = 0; i < oSrc.options.length; i++) {

                var j=parseInt(zero);

                if (oSrc.options[i].selected == true) {

                    oSrc.options[i].disabled=true;
                    var NewOption = new Option();
                    //var selected = oSrc.options[i].value;
                    NewOption.text = oSrc.options[oSrc.options.selectedIndex].text;
                    NewOption.value = oSrc.options[oSrc.options.selectedIndex].value;


                    oDest.options[j] = NewOption;


                    document.getElementsByName('moveforzero')[0].value=j+1;


                }   
            }


        });


$('#SelectedFeatures').change(function(){ 


        var d,f;
        var minuone=document.getElementsByName('moveforzero')[0].value;

            if(parseInt(minuone)>0)
            {

             document.getElementsByName('moveforzero')[0].value=parseInt(minuone)-1;
            }
            else
            {
                document.getElementsByName('moveforzero')[0].value="0";
            }

    d=$("#SelectedFeatures option:selected").text();
    var len=$("#SelectedFeatures").length;

    var g =$("#SelectedFeatures");

             //d=selectbox.options[(selectbox.selectedIndex)].text;

             var oSrc = document.getElementById('SelectFeatures');


                for (var i = 0; i < oSrc.options.length; i++) {
                    if (oSrc.options[i].disabled==true) {


                        f=oSrc.options[i].text;


                        if(d==f)
                        {
                            oSrc.options[i].disabled=false;
                            for(var i = 0; i <len; i++)
                            {

                                if($("#SelectedFeatures option["+i+"].selected"))
                                {
                jQuery("#SelectedFeatures option[value='"+d+"']").remove();
                                }

                            }
                        }


                    }   
                  }

     });

我的问题是在点击删除选择框内的空白区域时删除项目。

检查我的小提琴：http://jsfiddle.net/Manivasagam/ff5Lp0gv/18/

如何解决这个问题？

Answer 1

怎么样：

option {
    display: inline;
}
option:after {
    content: "\A";
    white-space: pre;
}

请参阅this updated fiddle。

Answer 2

根据我的理解，您希望在选择它时删除选项。在这里，我使用委托方法解决这个问题。请参阅此JSfIDDLE

$('#SelectedFeatures').delegate('option:selected', 'click',function(){ 

        var d,f;
        var minuone=document.getElementsByName('moveforzero')[0].value;

            if(parseInt(minuone)>0)
            {

             document.getElementsByName('moveforzero')[0].value=parseInt(minuone)-1;
            }
            else
            {
                document.getElementsByName('moveforzero')[0].value="0";
            }

    d=$("#SelectedFeatures option:selected").text();
    var len=$("#SelectedFeatures").length;
    //alert(len);
    var g =$("#SelectedFeatures");
    //alert(d);
             //d=selectbox.options[(selectbox.selectedIndex)].text;

             var oSrc = document.getElementById('SelectFeatures');


                for (var i = 0; i < oSrc.options.length; i++) {
                    if (oSrc.options[i].disabled==true) {


                        f=oSrc.options[i].text;
                        //alert(f);

                        if(d==f)
                        {
                            //alert("if");
                            oSrc.options[i].disabled=false;
                            for(var i = 0; i <len; i++)
                            {
                                //alert('for');

                                if($("#SelectedFeatures option["+i+"].selected"))
                                {
                                    //alert("remove");
                jQuery("#SelectedFeatures option[value='"+d+"']").remove();
                                }
                                // if(selectbox.options[i].selected)
                                 //selectbox.remove(i);
                            }
                        }


                    }   
                  }



     });

Answer 3

这是@Ferret解决方案的一个版本：

在<option></option>标记的末尾添加空白select，然后更改最后一个（空白）选项的样式：

option:last-child {
    display:inline;
    padding:0px;
}

您可能希望将样式更改为仅适用于该特定选择的最后一项。

这里是JSFiddle

即使点击选择框的空白也会发生onchange

3 个答案: