selectコントロールが入力可能状態になります。

13018 ワード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

 <style type="text/css">

    .boxBg{

        position:relative;

        width:200px;

        height:20px;

        margin:0 auto



    }

    .sBox{

        width:200px;

        height:20px;

    

    }

    .inputBox{

        position:absolute;

        left:0;

        top:0;

        width:179px;

        height:16px;

        border:1px solid green;

    }

 </style>

 



  <script type="text/javascript">

    function myselect(value){

    var element = document.getElementById('inputBox');

        if(value == 0){

            element.style.display = "block";

        }else{

            element.style.display = "none";

        }

    }

    

  </script>

 <title>3D  -   </title>

</head>

<body>

    <div class="boxBg">

        <select id="sValue" class="sBox" onchange="myselect(this.value);">

            <option value="0">   </option>

            <option value="1">   </option>

            <option value="2">   </option>

            <option value="3">   </option>

            <option value="4">   </option>

            <option value="5">   </option>

            <option value="6">   </option>

            <option value="7">   </option>

        </select>

        <input type="text" value="   " class="inputBox" id="inputBox"/>

    </div>

</body>

</html>
実行結果:
select控件变成可输入状态
入力を選択すると、手動で入力できます。