如何使用提示来动态地向选择菜单添加选项以获取值

时间:2013-11-04 09:02:32

标签: javascript jquery

我有一个选择菜单下拉列表

<div data-role="fieldcontain" data-controltype="selectmenu">
              <select id="selectmenu4" name="">
                  <option value="option1">
                      Category:
                  </option>
                  <option value="rent">
                      Rent
                  </option>
                  <option value="restaurant">
                      Restaurant
                  </option>
                  <option value="drinks">
                      Drinks
                  </option>
                  <option value="power">
                      Power
                  </option>
                  <option value="water">
                      Water Supply
                  </option>
                  <option value="specifyValue">
                      Other
                  </option>
                  <option value="gas">
                      Gas
                  </option>
                  <option value="pharmacy">
                      Pharmacy
                  </option>
                  <option value="coffeshop">
                      Coffeshop
                  </option>
                  <option value="groceries">
                      Groceries
                  </option>
                  <option value="gym">
                      Gym
                  </option>
                  <option value="clothes">
                      Clothes/Shoes/Accessories
                  </option>
                  <option value="vet">
                      Vet
                  </option>
                  <option value="pet_sup">
                      Pet supplies
                  </option>
                  <option value="other">Other</option>
              </select>
          </div>

当用户选择了选项other时,我想要提示弹出,我希望输入的值在选择菜单中存储为新的option

这是我用于提示的功能:

  var addAnotherOption = function(){
var newCat = function(){        
if(document.getElementById("selectmenu4").value === "other"){
            return (prompt("Define new Category"));
}document.getElementById("selectmenu4")createElement(newCat);}

2 个答案:

答案 0 :(得分:2)

你能试试这段代码,你想要类似的东西吗?

         $(function(){  
            $("#selectmenu4").change(function(){

                    var DropdownValue =$(this).val();
                    if(DropdownValue=='other'){

                        var OtherData=prompt("Enter Other values!","");
                        if(OtherData){
                            $("#selectmenu4").append("<option value="+OtherData+" >"+OtherData+"</option>");
                        }
                    }
            });

        });

答案 1 :(得分:0)

尝试此代码,您必须在文件中包含JQuery

   $(document).ready(function(){     
           $("#selectmenu4").change(function(){
                         var SelectValue =$(this).val();
                         if(SelectValue=='other')
                           {
                           var OtherData=prompt("Enter Other values!","");
                           if(OtherData)
                           {
                           $("#selectmenu4").append("<option value="+OtherData+">"+OtherData+"</option>");
                           }
                   }
              });

         });

Check Fiddle