Question

＆＃13;

$(function() {
  $('#Yes_smoke').hide();
  $('#smoke').change(function() {
    if ($('#smoke').val() == 'Yes') {
      $('#Yes_smoke').show();
    } else {
      $('#Yes_smoke').hide();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ex_smoker">
  <tr>
    <td class="prop">Are you an ex-smoker?</td>
    <td>
      <select name="smoke" id="smoke">
	    <option value="" selected="selected">Choose</option>
	    <option VALUE=""> </option>
        <option value="Yes">Yes</option>
		<option value="No">No</option>
	   </select>
    </td>
    <td>
      <select name="smoke" id="smoke">
		<option value="" selected="selected">Choose</option>
		<option VALUE=""> </option>
		<option value="Yes">Yes</option>
		<option value="No">No</option>
	   </select>
  </tr>
</div>
<div class="ex_smoker" id="Yes_smoke">
  <tr class="Yes_smoke">
    <td class="prop" width="20%">When did you last smoke?</td>
    <td>
      <INPUT TYPE="date" NAME="medical_smoker_es_when" VALUE="">
    </td>
    <td>
      <INPUT TYPE="date" NAME="medical_smoker_es_whenb" VALUE="">
    </td>
  </tr>
</div>

＆＃13;

这是我的jquery代码以及我的html表单的一部分。我试图制作＆＃39;你什么时候抽烟？＆＃39;当用户选择“是”时出现从上面的选择，并隐藏到那时。但它目前无法正常工作，我不确定为什么，任何帮助都会受到赞赏。谢谢。

Answer 1

你应该在窗口加载中编写一个函数代码 - 用于在DOM生成

上分配更改事件

<script type="text/javascript">

    $(window).load(function() {
        $('#Yes_smoke').hide();
        $('#smoke').change(function(){
            if($('#smoke').val() == 'Yes') {
                $('#Yes_smoke').show();
            } else {
                $('#Yes_smoke').hide();
            }
        });
    });

    </script>

Answer 2

您正在复制ID。

<div class="ex_smoker">
 <tr>
  <td class="prop">Are you an ex-smoker?</td>
 <td>
  <select name="smoke" id="smoke">
   <option value="" selected="selected">Choose</option>
   <option VALUE=""> </option>
   <option value="Yes">Yes</option>
   <option value="No">No</option>
 </select>
</td>
<td>
</tr>
</div>
 <div class="ex_smoker" id="Yes_smoke">
 <tr class="Yes_smoke">
  <td class="prop" width="20%">When did you last smoke?</td>
  <td>
  <INPUT TYPE="date" NAME="medical_smoker_es_when" VALUE="">
 </td>
 <td>
  <INPUT TYPE="date" NAME="medical_smoker_es_whenb" VALUE="">
 </td>
 </tr>
</div>

Answer 3

正如Lelio指出的那样，你有两个完全相同的选择框。删除重复似乎可以解决问题 - 请参阅此JSFiddle。

另外，请确保在自定义脚本之前加载JQuery，即确保行

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

或类似的，例如，引用本地库，上面的HTML页面中的脚本。

最好在<body>元素结束之前添加脚本。

尝试通过jquery在下拉列表选择中显示一行

3 个答案: