Hello, everyone, program monkey egg brothers, today to bring you a small front-end knowledge: text input text + drop-down selection box (SELECT) combined with the realization of optional, can also input.

Datalist tag implementation based on H5

Effect:

Implementation method:

<input name="teleplay" list="teleplay_list"/>
<datalist id="teleplay_list">
    <option value="Game of Thrones"/>
    <option value="Day and night chasing a murderer."/>
    <option value=Detective Dee/>
    <option value="It's all good."/>
</datalist>
Copy the code

Description:

  1. <datalist>The label specifies<input>A list of possible options for the element,<input>With the list attribute<datalist>Association.
  2. Internet Explorer 9 (earlier VERSIONS of IE) is not supported<datalist>The label

Attach the complete code:


      
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Datalist tag implementation based on H5</title>
    </head>
    <body>
        <label>Favorite TV series:</label>
        <input name="teleplay" list="teleplay_list"/>
        <datalist id="teleplay_list">
            <option value="Game of Thrones"/>
            <option value="Day and night chasing a murderer."/>
            <option value=Detective Dee/>
            <option value="It's all good."/>
        </datalist>

        <br>
        <div id="tip"></div>

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
        <script>
            $(function() {$('input[name=teleplay]').change(function() {$('#tip').html('What do you like:' + $(this).val());
                });
            });
        </script>
    </body>
</html>
Copy the code