HTML5 Select标签基本使用

HTML5 select标签类似Android的Spinner,基本使用如下:

  • html填充数据
  • js填充数据
  • js控制选中条目
  • html填充数据如下

  •     <body>
            <header class="content-center">
                <select id="select-main">       
                    <option>Hellooption>
                    <option>HTML5option>
                select>
            header>       
        body>

    效果图:

    HTML5 Select标签基本使用_第1张图片


  • js填充数据如下

  • 
    <html>
    
        <head>
            <meta charset="utf-8" />
            <title>title>
        head>
        <style>
            .content-center {
                text-align: center;
            }
        style>
    
        <body>
            <header class="content-center">
                <select id="select-main">       
                select>
            header>
    
        body>
        <script>
            var selectView = document.getElementById('select-main');
            for (var i = 0; i < 10; i++) {
                selectView[i] = new Option('name' + i, 'value' + i);
            }
        script>
    
    html>

    效果图:

    HTML5 Select标签基本使用_第2张图片


  • js控制选中条目

  • 
    <html>
    
        <head>
            <meta charset="utf-8" />
            <title>title>
        head>
        <style>
            .content-center {
                text-align: center;
            }
    
            .btn-style {
                border: solid 1px gray;
                background-color: white;
                margin: 100px;
                width: 20%;
                border-radius: 1px;
            }
    
            .btn-style:active {
                background-position: bottom right;
                color: white;
                background-color: gray;
                outline: none;
            }
        style>
    
        <body>
            <header class="content-center">
                <select id="select-main">
    
            select>
            header>
            <article class="content-center">
                <button id="select-btn" class="btn-style">选中第三个button>
            article>
        body>
        <script>
            var selectView = document.getElementById('select-main');
            for (var i = 0; i < 10; i++) {
                selectView[i] = new Option('name' + i, 'value' + i);
            }
    
            document.getElementById('select-btn').addEventListener('click',function(){
                selectView[2].selected = true;          
            });
        script>
    
    html>

    效果图:

    HTML5 Select标签基本使用_第3张图片

    你可能感兴趣的:(HTML5)