选择其他项目时从选择框中添加和删除选项答案

【问题标题】：add and remove options from select box when other item selected选择其他项目时从选择框中添加和删除选项
【发布时间】：2012-10-18 15:46:54
【问题描述】：

我使用了 jsfiddle 上的代码（如下）。我遇到的问题是，如果我将选项值更改为与文本值不同，它会在更改时将该值添加回文本字段。

jQuery(function(){
            jQuery('.selbox').change(function(){
            var val = jQuery(this).val();

            var sel = jQuery(this);

            if(val != "")
            {
            if(sel.data("selected"))
            {   
            var oldval = sel.data("selected");


            sel
           .siblings('select')
           .append(jQuery('<option/>').attr("value", oldval).text(oldval));
           }

           sel
            .data("selected", val)
            .siblings('select')
            .children('option[value=' + val + ']')

            .remove();
          }
          else if(val == "")
          {
          if(sel.data("selected"))
          {   
           var oldval = sel.data("selected");


           sel
           .removeData("selected")
           .siblings('select')
           .append(jQuery('<option/>').attr("value", oldval).text(oldval));
           }
           }            
           });
           });

我正在使用代码

<option value="1">text here</option>

原码http://jsfiddle.net/BUuZv/2/请看这里

【问题讨论】：

我反复阅读了您的问题，但不确定您到底想要什么。如果我从第一个菜单中选择选项 1，它将从菜单 2 和 3 中删除选项 1。可以吗？但是如果我在第一个菜单中再次将选项 1 更改为选项 2，您不希望选项 1 显示在其他两个菜单中吗？

标签： javascript jquery forms

【解决方案1】：

您可以像 this fiddle 一样简单地 hide/show 它们，而不是删除它们并添加它们

$(function() {
    $('.selbox').change(function() {
        var val = $(this).val();
        var sel = $(this);

        if (val != "") {
            if (sel.data("selected")) {
                var oldval = sel.data("selected");
                sel.siblings('select').find('option[value="' + oldval + '"]').show()
            }

            sel.data("selected", val).siblings('select').children('option[value=' + val + ']').hide();
        }
        else {
            if (sel.data("selected")) {
                var oldval = sel.data("selected");
                sel.removeData("selected").siblings('select').find('option[value="' + oldval + '"]').show()
            }
        }
    });
});

【讨论】：

【解决方案2】：

今天想解决这个问题，这就是我的做法。当用户选择其他时，它会给出一个提示框来添加新的选项值。

 function edit_other(e){ //e just stands for element, it can be any varaible name e is just standard practice after using "this"
    
    
        if(e.value == "Other"){
            //only run function if "other" option has been selected
    
                var proceed = false;
            while(proceed == false){
                prompt_response = prompt("Please enter new material type:"); //Create Prompt box
                if (typeof(prompt_response) == "string"){
    
                             prompt_response = prompt_response.trim(); //tidy end
    
                    if (prompt_response != ""){//// no value provided by the user on "ok button press"
                         proceed = true;
                        //alert('Please Enter a value to continue or press Cancle!');
                    }
    
                }
                if (prompt_response === null){////cancel hits
                    proceed = false; //make sure proceed is still false
                    break;
                }
            }
                //once the user enters a valid value add option script
            if(proceed == true){
    
                    var new_option = document.createElement("option"); //create nre DOM option element
                new_option.text = prompt_response; //Make the text value equal to promt repsonse
                    new_option.value = prompt_response; //Make the option select value equal to promt repsonse
                    new_option.selected = true; //OPTIONAL: select the new added value, most people will select this if they are adding a new value
                    e.add(new_option); //add new option
            }
    
    
        }
    }


   

 <select id="xxx" onchange="edit_other(this)">
       <option value="1"> First Option </option>
       <option value="Other">Other</option>
    <select>

【讨论】：