dimanche 1 juillet 2018

User can manually input dropdown value if option isn't listed

I want to add an option to my dropdowns where the user can manually input information if one of the options does not apply. I made a simple dropdown list with colors as an example. The last input is other; however, I do not know how to make that editable if a user selects it. Any ideas? Help is much appreciated.

<!DOCTYPE html>
<html>

  <head>
        <title>Test</title>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

        <style type="text/css">
  table,td,th {margin-left: auto;margin-right: auto}
  .display {display: flex;align-items: center;justify-content: center;}
  p {text-align: center;}
  textarea {display: block;margin-left:auto;margin-right: auto;}
        </style>

  <body>
    <table>
      <tr>
        <td> <select name="color" id="z4"> <option value="" disabled selected>Color</option> <option value="red">Red</option> <option value="orange">Orange</option>
          <option value="yellow">Yellow</option> <option value="green">Green</option> <option value="purple">Purple</option>  <option value="white">White</option>
          <option value="black">Black</option> <option value="gray">Gray</option> <option value="Other">Other</option> 
        </select></td>
      </tr>
    </table>
    <br>
    <div class="display">
      <button onclick="sentence()"> Submit </button>
    </div>


  </body>
</html>

Aucun commentaire:

Enregistrer un commentaire