Question

我在基于云的服务器上有一个html（无php）表格。我无权访问服务器文件。我正在努力做两件事：

1）根据下拉值显示/隐藏div（我确实在我的网站上运行此功能，但由于某些原因，它在我的jsfiddle中不起作用）

2）保存表单后，保持下拉值。

//Use to hide Analysis div when analysisPub question is answered no
$('.analysisPub').on('change', function () {
    if(this.value === "Yes"){
        $("#analysis").show();
    } else {
        $("#analysis").hide();
    }
});

/*Hide Analysis div by default*/

.analysis {
 
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Does this publication include in any form?</td>
  </tr>

  <tr>
    <td class="analysisPub" id="analysisPub" name="analysisPub">
     <select class="analysisPub" id="analysisPub" name="analysisPub">
        <option value="No">No</option>
        <option value="Yes">Yes</option>
      </select>
  </tr>
</table>



<!-- ANALYSIS DIV -->
<div id="analysis" class="analysis">
<h1>
Analysis Details
</h1>
  <table>
    <tr>
      <td><label>Project Name</label>
      </td>
      <td class="text-area">
      </td>
    </tr>

    <tr>
      <td><label>Manager Name</label>
      </td>

      <td class="text-area">
      </td>
    </tr>
  </table>
</div>

如果用户从下拉列表中选择“否”，我希望div保持隐藏，如果用户选择“是”，则div应该保持可见。当前，用户选择什么都无关紧要，只要保存并重新打开表单，div就会默认返回隐藏状态（因为CSS）。

我对javascript非常陌生，这个项目已在最后一分钟掉到我的腿上（叹气）。

Answer 1

如果您从td元素中删除ID并进行更改，则标记中有2个元素的ID为“ analysisPub”

$('.analysisPub').on('change', function () {

到

$('#analysisPub').on('change', function () {

为了使用ID，您的代码可以正常工作。

要记住选择，可以使用localStorage API。

//Use to hide Analysis div when analysisPub question is answered no
$('#analysisPub').on('change', function() {
  window.localStorage.setItem("showAnalysis", this.value);
  if (this.value === "Yes") {
    $("#analysis").show();
  } else {
    $("#analysis").hide();
  }
});

// check if value is already remembered and set it to the saved value:

if (window.localStorage.getItem("showAnalysis")) {
  $('#analysisPub').val(window.localStorage.getItem("showAnalysis"));
}

/*Hide Analysis div by default*/

.analysis {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Does this publication include in any form?</td>
  </tr>

  <tr>
    <td class="analysisPub" name="analysisPub">
      <select class="analysisPub" id="analysisPub" name="analysisPub">
        <option value="No">No</option>
        <option value="Yes">Yes</option>
      </select>
  </tr>
</table>



<!-- ANALYSIS DIV -->
<div id="analysis" class="analysis">
  <h1>
    Analysis Details
  </h1>
  <table>
    <tr>
      <td><label>Project Name</label>
      </td>
      <td class="text-area">
      </td>
    </tr>

    <tr>
      <td><label>Manager Name</label>
      </td>

      <td class="text-area">
      </td>
    </tr>
  </table>
</div>

提交后保持表格价值

1 个答案: