使用onchange()显示基于下拉选择的结果

Use onchange() to display result based on drop down selection

本文关键字：于下拉 选择 结果 显示 onchange 使用      更新时间：2023-09-26

下面是我的代码:

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()没有显示任何内容。任何建议都将不胜感激。

使用JQuery，如果您更改了一些东西，可能会更容易:

  • 从选择元素中删除onClick方法
  • 给你的select元素一个唯一的id
  • 使用Jquery语法通过id $("#elementId")
    • 获取元素
  • 添加div或span来显示结果

下面是一个工作示例:

<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());
    });
});

工作示例

您可以在JsFiddle上看到一个工作示例。

  • $(document).ready() -文件已准备好操作
  • $("#locationSelect").change -处理id为locationSelect的元素的更改事件。
  • $("#displayText").html -获取或设置id为displayText
    • 的元素的html
  • $(this).val() -我们当前正在处理的任何元素的值(在本例中，是被选中的option)
资源

  • JQuery Document Ready
  • JQuery变化
    • Jquery Html
    • Jquery Val
后续:

你需要一个打开和关闭的<script>标签来包含你的Jquery， 与你加载库的地方分开:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <!-- The above line needs to be separate from the script tag that contains your JQuery -->
 <script>
  $(document).ready(function () {
      $("#locationSelect").change(function () {
          $("#displayText").html($(this).val());
       });
  });
  </script>

在文档中以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>

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>

小提琴

正如你所看到的结果数据(classCode)被放置在resultdiv. html()允许你用html填充div，但是有很多方法可以向div添加内容。在这种情况下，这可能是最好的，但我建议学习一些，如:text()， append()和prepend()。

注:本例使用的event handlers在HTML内容之外。这不是必需的，这只是我如何组织我的jQuery代码，以帮助它更易于阅读。

你可以简单地更新你的javascript代码:

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