动态下拉选项数据不存储在数据库中，但仅存储在索引号中

I am using a dynamic dropdown list using javascript for my HTML form. I am also connected with the database to store all the values. It stores all the values perfectly except dropdown list value but instead of value its stores the index value. I used the javascript array method for dropdown

    <select id="service" required name="service" onchange="ChangeServiceList()"> 
        <option value="">-- Select --</option> 
        <option value="web">Web Design</option> 
        <option value="civil">Civil Services</option> 
        <option value="electrical">Electrical Services</option> 
    </select> 

    <select id="submenu" required name="category" value=""></select>

javascript code:

    <script>
      var serviceAndLists = {};
      serviceAndLists['web'] = ['-- select --','Static', 'Dynamic', 'E-comeerce'];
      serviceAndLists['civil'] = ['-- select --','c_type1', 'c_type2', 'c_type3'];
      serviceAndLists['electrical'] = ['-- select --','e_type1', 'e_type2', 'e_type3'];

      function ChangeServiceList() {
         var serviceList = document.getElementById("service");
         var modelList = document.getElementById("submenu");
         var selService = serviceList.options[serviceList.selectedIndex].value;
         while (modelList.options.length) {
         modelList.remove(0);
       }
       var services = serviceAndLists[selService];
       if (services) {
         var i;
         for (i = 0; i < services.length; i++) {
            var service = new Option(services[i], i);
            modelList.options.add(service);
           }
          }
         } 
       </script>

Html form working is fine...but storing a value in the database it stored only index number... pls, help me.

Just to elaborate, when you create a new Option(), the second argument will define the value for that particular option. See here for more information.

<script>
  var serviceAndLists = {};
  serviceAndLists['web'] = ['-- select --','Static', 'Dynamic', 'E-comeerce'];
  serviceAndLists['civil'] = ['-- select --','c_type1', 'c_type2', 'c_type3'];
  serviceAndLists['electrical'] = ['-- select --','e_type1', 'e_type2', 'e_type3'];

  function ChangeServiceList() {
     var serviceList = document.getElementById("service");
     var modelList = document.getElementById("submenu");
     var selService = serviceList.options[serviceList.selectedIndex].value;
     while (modelList.options.length) {
     modelList.remove(0);
   }
   var services = serviceAndLists[selService];
   if (services) {
     var i;
     for (i = 0; i < services.length; i++) {
        var service = new Option(services[i], services[i]);
        modelList.options.add(service);
        modelList.options.add(service);
       }
      }
     } 
</script>