Question

我一直试图从一个简单的下拉列表中获取用户输入，以将其填充到<p>标记中，但似乎无法完成。

以下是我的javascript：

<script>
    function changeText() {
        var textDDL = document.getElementById("DDL1");
        var text = textDDL.options[textDDL.selectedIndex].value;

        var test = document.getElementById("test");
        test.innerHTML = text;
     }
</script>

以下是我的HTML代码：

<p class="first">
                    <label for="first">From</label>                     
                    <input list="countriesDL" name="country" class="form-control" type="text" id="DDL1">
                    <datalist id="countriesDL">
                        <option value="Afghanistan" class="form-control"></option>
                        <option value="Albania"></option>
                        <option value="Algeria"></option>
                        <option value="Aland Islands"></option>
                        <option value="American Samoa"></option>
                        <option value="Anguilla"></option>
                        <option value="Andorra"></option>
                        <option value="Angola"></option>
                        <option value="Antilles - Netherlands"></option>
                        <option value="Antigua and Barbuda"></option>
                        <option value="Antarctica"></option>
                        <option value="Argentina"></option>
                        <option value="Armenia"></option>
                        <option value="Australia"></option>
                        <option value="Taiwan"></option>
                    </datalist>

                </p>
<button id="info2Btn" type="button" class="btn btn-warning leggo" style="color:black;" onClick="changeText()">Let's Go</button>

按下按钮即可触发密码。我尝试在按下按钮时重新加载页面以查看其是否应用了用户输入，我尝试在单击按钮时调用该函数。似乎看不出有什么问题。

Answer 1

[更新] ，这是您要尝试的吗？

function changeText() {
    var textDDL = document.getElementById("DDL1");
    var text = textDDL.value;

    var test = document.getElementById("text");
    test.innerHTML = text;
 }

<p class="first">
                    <label for="first">From</label>                     
                    <input list="countriesDL" name="country" class="form-control" type="text" id="DDL1">
                    <datalist id="countriesDL">
                        <option value="Afghanistan" class="form-control"></option>
                        <option value="Albania"></option>
                        <option value="Algeria"></option>
                        <option value="Aland Islands"></option>
                        <option value="American Samoa"></option>
                        <option value="Anguilla"></option>
                        <option value="Andorra"></option>
                        <option value="Angola"></option>
                        <option value="Antilles - Netherlands"></option>
                        <option value="Antigua and Barbuda"></option>
                        <option value="Antarctica"></option>
                        <option value="Argentina"></option>
                        <option value="Armenia"></option>
                        <option value="Australia"></option>
                        <option value="Taiwan"></option>
                    </datalist>

                </p>
<button id="info2Btn" type="button" class="btn btn-warning leggo" style="color:black;" onClick="changeText()">Let's Go</button>
<p id="text"></p>

Answer 2

尝试

function changeText() {
   document.getElementById("test").innerHTML = document.getElementById("DDL1").value;
}

无法从下拉列表中获取用户输入

2 个答案: