html中input輸入和下拉選擇同時存在

使用input的list屬性：

如：

<!-- <div class="changeDiv"> -->

    <a>性別:</a>

    <input id="sex" type="text" list="sexlist">

    <datalist id="sexlist">

        <option>男</option>

        <option>女</option>

        <option>女1</option>

        <option>hhh</option>

        <option>gggg</option>

        <option>男</option>

        <option>5555</option>

        <option>pingg</option>

    </datalist>

<!-- </div> -->

<button id="btn">點擊</button>

<style type="text/css">

     input {

    font-size: 1em;

    font-family: 仿宋, serif;

    width: 10%;

    display: block;

    margin-left: 10%;

    opacity: 0.8;

    padding: 0.2em;

    color: #000000;

    border-radius: 4px;

    background-color: #bed8df;

}

</style>

<script src="../assets/scripts/jquery-1.11.3.min.js"></script>

<script>

    // var ss = document.getElementById('sex').val();

    // console.log(ss);

    $(function(){

        $('#btn').click(function(){

            var ss = $('#sex').val();

        console.log(ss);

        });

    });

</script>