jquery implements the function of customizing the input text in the drop-down box

Generally speaking, the Select drop-down box can only be selected and cannot be used to enter content. When there is no information item to be selected in the drop-down box, you need to enter it manually.

Implementation idea: through the combination of select and text text box, the specific implementation is to cover the text text box on the select drop-down box, only exposing the triangle part, and then click on change() Function, assign a value to the text box.

The specific code is as follows

<p style="position:relative;">
      <span style="margin-left:100px;width:18px;overflow:hidden;">
       <select id="DanWei" style="width:235px;margin-left:-86px;height:31px;" onchange="danwei()">
             <option value="m3/s" selected>m3/s</option>
             <option value="mm">mm</option>
             <option value="℃">℃</option>
             <option value="KV">KV</option>
        </select>
        </span>  
        <input type="text" id="units" name="units" style="width: 215px;margin-left: -239px;height: 31px;color:#000;">

</p>

<script type="text/javascript">

     //用于单位选择更换赋值给文本框
     function danwei(){
          var text=$("#DanWei").val();
          $("#units").val(text);
     }
</script>

For more related tutorials, please visit JavaScript video tutorial