将表单中从下拉框中选择的内容显示为只读

display selected from dropdown box in a form as readonly

本文关键字：显示 只读 表单 选择      更新时间：2023-09-26

我有一种情况，即我希望从下拉框中选择的数据显示在它下面的表单（文本类型）中，并且应该是只读的。（使用html/javascript）。我不能那样做，因为我是这方面的先驱希望响应

下面是一个非jquery方法的粗略草图，该方法使用下拉菜单中的输入动态更改一个表单框。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script type="text/javascript">
            function optionCallBack (arg) {
                var currentOption = arg.options[arg.selectedIndex].text;
                document.getElementById('changeForm').value = currentOption;
            }
        </script>
    </head>
    <body>
        <select onclick="optionCallBack(this)" id='getForm'>
          <option>asia</option>
          <option>africa</option>
          <option>america</option>
          <option>europe</option>
        </select>
        <form>
            <input value='europe' name='changeForm' id='changeForm'></input>
        </form>
    </body>
</html>

首先，您需要一个如下所示的选择列表（注意onchange事件处理程序）

<select onchange="fillTextBox(this)" id='mySelectList'>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
</select>

您还需要一个文本框（让我们给它一个Id myTextBox）

<input value='' name='' id='myTextBox'></input>

fillTextBox函数需要以下脚本

function fillTextBox(obj) {
    var sel = obj.value;
    document.getElementById('myTextBox').value = sel;   
}
相关文章：