首页在html页面中加一个select控件，option value为1，2，3，4；当选择为1时，值为01，选择为2时，值为02，选择为3时值为03，将select得到的值和另一个input 控件id=e组合输出成字符串

在html页面中加一个select控件，option value为1，2，3，4；当选择为1时，值为01，选择为2时，值为02，选择为3时值为03，将select得到的值和另一个input 控件id=e组合输出成字符串

时间: 2024-11-12 16:33:09 浏览: 12

在HTML页面中，你可以创建一个`<select>`标签用于选择，以及一个`<input>`标签作为显示结果的地方。这里是一个简单的实现，当你选择1、2、3、4中的任何一个选项，对应的值会被处理并显示在`<input>`标签里： ```html <!DOCTYPE html> <html> <head> <title>Select Control Example</title> </head> <body> <label for="select">选择数字:</label> <select id="numberSelector" onchange="updateInputValue()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select><br> <label for="display">结果显示:</label> <input type="text" id="displayResult" readonly> <script> function updateInputValue() { var selectedValue = document.getElementById('numberSelector').value; switch(selectedValue) { case '1': document.getElementById('displayResult').value = '01'; break; case '2': document.getElementById('displayResult').value = '02'; break; case '3': document.getElementById('displayResult').value = '03'; break; default: document.getElementById('displayResult').value = selectedValue; } } </script> </body> </html> ``` 在这个例子中，`onchange`事件会触发`updateInputValue`函数，根据所选值转换后显示在`displayResult`输入框内。由于`readonly`属性设为`true`，用户无法直接修改该值。

阅读全文