Question

这是我的代码：

使用Javascript：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
      $(document).ready(function () {
          $("#locationSelect").change(function () {
          $("#displayText").html($(this).val());
});
});
</script>

HTML：

<form action='VERIFY.php' method='post'>
<table border = '0'>
<tr>
    <td>Title</td>
    <td><input type="text" name="title" maxlength="60" size="30"></td>
</tr>
<tr>
    <td>Location</td>
    <td><select id='locationSelect' name='location' size='1'>
<option value="csc105">Brock University</option>
<option value="hbhh202">Carleton University</option>
<option value="as990">Centennial</option>
</select></td>
    <td><div id="displayText"></div></td>
 </tr>    
 <tr>
     <td colspan="2"><input type="submit" value="Post Ad"></td>
 </tr>
 </table>
</form>

当客户选择学校时，我希望在不刷新浏览器的情况下显示值（类代码）。我已经尝试过使用document.write（），但是会在空白页面上显示值，而console.log（）没有显示任何内容。任何建议，将不胜感激。

Answer 1

在文档中的DIV或SPAN中显示结果：

<form action='VERIFY.php' method='post'>
    <select name='location' size='1' onchange="handleSelect(this.form)">
        <option value="csc105">Brock University</option>
        <option value="hbhh202">Carleton University</option>
        <option value="as990">Centennial</option>
    </select>
</form>
<p>You chose: <span id="output"></span></p>

<script>
function handleSelect(myForm)
{ 
    var classCode = myForm.location.value;
    document.getElementById('output').innerText = classCode;
}
</script>

Answer 2

使用JQuery，如果你改变了一些东西可能会更容易：

从select元素中删除onClick方法
为您的select元素添加唯一ID
使用Jquery语法按标识$("#elementId")
添加div或span以显示结果

以下是一个工作示例：

的 HTML

<form action='VERIFY.php' method='post'> <select name='location' id="locationSelect" size='1'> <option value="csc105">Brock University</option> <option value="hbhh202">Carleton University</option> <option value="as990">Centennial</option> </select> </form> <br /> <br /> <div id="displayText"> </div>

的 JQuery的

$(document).ready(function () { $("#locationSelect").change(function () { $("#displayText").html($(this).val()); }); });

工作示例

您可以看到working example on JsFiddle。

的说明

$(document).ready() - 文档已准备好进行操作

$("#locationSelect").change - 处理ID为locationSelect的元素上的change事件。

$("#displayText").html - 获取或设置id为displayText
的元素的html
$(this).val() - 我们当前正在处理的任何元素的值（在这种情况下，已选择的option）

<强>资源

JQuery Document Ready

JQuery Change

Jquery Html

Jquery Val

的后续：

您需要一个打开和关闭的<script>标记来包含您的Jquery，与您加载库的位置分开：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script> $(document).ready(function () { $("#locationSelect").change(function () { $("#displayText").html($(this).val()); }); }); </script>

Answer 3

console.log只会将结果记录到FireFox或Chrome中的开发控制台。这非常适合检查结果数据，但如果您希望数据显示在页面上，那么您必须为它提供一个jQuery选择器，用于标识要将数据放入的元素，如下所示：

示例

<form action='VERIFY.php' method='post'> <select id="location" name='location' size='1'> <option value="csc105">Brock University</option> <option value="hbhh202">Carleton University</option> <option value="as990">Centennial</option> </select> </form> <div id="result"><div> <script> $('#location').on('change', function () { var classCode = document.forms[0].location.value; $('#result').html('<p>' + classCode + '</p>'); }); </script>

<强> FIDDLE

正如您所看到的，结果数据（classCode）位于result div中。 html()允许您使用html填充div，但有很多方法可以将内容添加到div中。在这种情况下，这可能是最好的，但我建议学习一些例如：text()，append()和prepend()。

注意：示例使用了HTML内容之外的event handlers。这不是必需的，它只是我如何组织我的jQuery代码以帮助它更具可读性。

Answer 4

您只需更新您的javascript代码，如：

function handleSelect(myForm)
{ 
    var classCode = myForm.location.value;
    console.log("<p>" + classCode + "</p>");
}

使用onchange（）显示基于下拉选择的结果

4 个答案:

的 HTML

的 JQuery的

工作示例

的说明

<强>资源

的后续：