Labels

Tuesday, April 22, 2014

Source code for Text Output from a Dropdown Select

<!DOCTYPE HTML>

  <html>

    <head>

    <meta charset="utf-8">

    <title>Display phone number on select</title>

  </head>


  <body>

    <label for="storeSelect">Nearest Store</label>

    <select id="nearestStore">

      <option value="noSelection">Please Select</option>

      <option value="Lowestoft">Lowestoft</option>

      <option value="GtYarmouth">Gt Yarmouth</option>

      <option value="Norwich">Norwich</option>

      <option value="Diss">Diss</option>

    </select>

    

    <div id="phoneNumber"></div>

    

    <script>

      var nearestStore = document.getElementById("nearestStore"),

          phoneNumber = document.getElementById("phoneNumber"),

          stores = {

            noSelection: "",

            Lowestoft: "12345678",

            GtYarmouth: "222 444 666",

            Norwich: "999 999 999",

            Diss: "0000000000000"

          }

          

      nearestStore.onchange = function(){

        phoneNumber.innerHTML = stores[this.value];

      }

    </script>

  </body>

</html>