Question

我有一组<select><option>，如果我按其选择1个选项，它会在<div>中显示一些文字。

这是我的代码

$(document).ready(function() {
  $('#selectcom').change(function() {
    opt = $(this).val();
    if (opt == "comp_id") {
      $('#new_text').html('Varchar');
      $('#size_row').html('20');
    } else if (opt == "comp_name") {
      $('#new_text').html('Varchar');
      $('#size_row').html('20');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <select class="selectField" onChange="" id="selectcom">
    	<option value="">-- Select Field --</option>
    	<option value="comp_id">comp_id</option>
    	<option value="comp_name">comp_name</option>
    	</select>
  </td>
  <td id="data_row">
    <div id="new_text"></div>
  </td>
  <td id="size_row">
    <div id="size_row"></div>
  </td>
</tr>

问题是我无法使用此代码显示varchar文本或20文本的任何输出。有人请帮助我。谢谢..

Answer 1

有效。我怀疑你在脚本块/文件之前没有引用jQuery。检查开发人员的控制台。它是否显示如下：

未捕获的ReferenceError：$未定义

解决方案：确保在脚本块/文件之前加载了jQuery文件。

像：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="your-jsfile.js" type="text/javascript"></script>

不喜欢：

<script src="your-jsfile.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(document).ready(function() {
  $('#selectcom').change(function() {
    opt = $(this).val();
    if (opt == "comp_id") {
      $('#new_text').html('Varchar');
      $('#size_row').html('20');
    } else if (opt == "comp_name") {
      $('#new_text').html('Varchar');
      $('#size_row').html('20');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <select class="selectField" onChange="" id="selectcom">
    	<option value="">-- Select Field --</option>
    	<option value="comp_id">comp_id</option>
    	<option value="comp_name">comp_name</option>
    	</select>
  </td>
  <td id="data_row">
    <div id="new_text"></div>
  </td>
  <td id="size_row">
    <div id="size_row"></div>
  </td>
</tr>

另外，我建议使用switch语句。我不了解性能，但在我看来，它提高了可读性。

$(document).ready(function() {
  $('#selectcom').change(function() {
    opt = $(this).val();
    switch (opt) {
      case "comp_id":
        $('#new_text').html('Varchar');
        $('#size_row').html('20');
        break;
      case "comp_name":
        $('#new_text').html('Varchar');
        $('#size_row').html('20');
        break;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <select class="selectField" onChange="" id="selectcom">
    	<option value="">-- Select Field --</option>
    	<option value="comp_id">comp_id</option>
    	<option value="comp_name">comp_name</option>
    	</select>
  </td>
  <td id="data_row">
    <div id="new_text"></div>
  </td>
  <td id="size_row">
    <div id="size_row"></div>
  </td>
</tr>

Answer 2

首先检查控制台是否由于其他脚本而导致某些错误，如果您在更改函数上使用直接jquery，请使用onChange =“”，或使用以下方法。

<tr>
    <td>
    <select class="selectField" onChange="changeMyValue(this.value)" id="selectcom">
    <option value="">-- Select Field --</option>
    <option value="comp_id">comp_id</option>
    <option value="comp_name">comp_name</option>
    </select>
    </td>
        <td id="data_row"><div id="new_text"></div></td>
        <td id="size_row"><div id="size_row"></div></td>
        </tr>   


function changeMyValue(opt) {
    if (opt=="comp_id") 
    {
        $('#new_text').html('Varchar');
        $('#size_row').html('20');
    }
    else if (opt == "comp_name") 
    {
        $('#new_text').html('Varchar');
        $('#size_row').html('20');
    }
}

Answer 3

没有足够的信息;但是试着确保你包含jQuery参考：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

如果你这样做，我可以从jsfiddle看到。我怀疑css以白色显示输出...尝试显示一些css代码。

无法显示文本onchange选择选项

3 个答案: