Question

我是java的初学者，不熟悉javascript或php，因此我可以根据自己的需要浏览和复制简化的javascript/php代码示例。这样我就可以在stackowerflow中找到并尝试实现我的需要：

脚本：

<script type="text/javascript">
    function onchange() {
        var e = document.getElementById("persId");
        var persSelected = e.options[e.selectedIndex].text;
        document.getElementById("myInput").value=persSelected;
    }
</script>

和正文：

<body>
<div th:replace="fragments/main.html :: top_menu"/>

<div class="w3-container" align="center">

    <form action="/add" method="post" class="w3-container w3-card-4 w3-light-grey w3-text-blue w3-margin w3-center" style="width: 50%" >
        <h2 class="w3-center">Add the challenger</h2>


        <select name="pers" id="persId" onchange="onchange();">
            <option th:each="person: ${personList}">
                <title id="titleId" th:text="${person.getName()}"/>
            </option>
        </select>

<div class="w3-row w3-section">
    <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
    <div class="w3-rest">
        <input class="w3-input w3-border" id="myInput" name="lastName" type="text"  onkeyup="myFunction()" placeholder="Search for last names.." title="Type in a last name">
    </div>
</div>

我将person的列表放到了下拉列表中，但没有将选定的项目放入input文本字段中。

如何正确实施此代码？

Answer 1

似乎是这样的： document.getElementById（“ persId”）。value = persSelected;

应为： document.getElementById（“ myInput”）。value = persSelected;

Answer 2

我不知道-如何type块中使用参数script。为什么，当我擦除此代码时：type="text/javascript"一切正常

Answer 3

您的代码有问题

选项没有标题元素
因为没有标题元素，所以您必须从select元素中获取所选值

让我解释一下。

此代码没有意义：

<option th:each="person: ${personList}">
    <title id="titleId" th:text="${person.getName()}"/>
</option>

选项没有标题。相反，您应该只在选项内使用文本。像这样：

<option th:each="person: ${personList}">
    ${person.getName()} // this should just turn into text
</option>

所以您最终会得到：

<option th:each="person: ${personList}">
    John Doe
</option>

好吧，现在要做的第一件事是解决您的其他问题。：）

这行可能有用。

var persSelected = e.options[e.selectedIndex].text;

但是由于选项中没有元素，因此我们需要将值获取到其他位置。

最简单的方法是获取select元素的值。

像这样：

var persSelected = document.getElementById("persId").value;

这是一个工作脚本文件的示例：

脚本：

<script type="text/javascript">
    function onchange() {
        var persSelected = document.getElementById("persId").value;
        document.getElementById("myInput").value = persSelected;
    }
</script>

如何将“选择”下拉列表中的文本值设置为“输入”文本字段？

3 个答案: