How to dynamically add options to a select menu using a prompt to get the value

Question

I have a select menu drop down list

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

When option other is selected by the user I want a prompt to pop out and I want the value of the input to be stored as a new option in the select menu.

This is the function I am using for the prompt:

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

Answer 1

Try this code you must include JQuery in your file

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

Answer 2

Can you try this code, Do you want something similar?

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

        });