javascript - 带 HTML 选择的 Jquery 类别更新系统

Question

我正在制作一个系统，您可以在其中使用 <select>和<option>作为支持系统的值(value)。我试图做到这一点:如果您单击“捐赠”，它将加载文本，然后在选择其他内容后将其删除。

我怎样才能做到这一点？我想在 Jquery 中执行此操作，但我是新手。

<select style="width:200px;">
  <option value="Ban Appeal">Ban Appeal</option>
  <option value="Donation">Donation</option>
  <option value="Report a Player">Report a Player</option>
  <option value="Staff Report">Staff Report</option>
  <option value="Suggestion">Suggestion</option>
  <option value="Forgot Pass?">Forgot Pass?</option>
  <option value="Apply for Staff">Apply for Staff</option>
</select>

Answer 1

您可以检查更改事件并执行您想要的操作。

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<select style="width:200px;" onchange="if(this.value=='Donation')a();else b();">
  <option selected value="">select any one</option>
  <option value="Ban Appeal">Ban Appeal</option>
  <option value="Donation">Donation</option>
  <option value="Report a Player">Report a Player</option>
  <option value="Staff Report">Staff Report</option>
  <option value="Suggestion">Suggestion</option>
  <option value="Forgot Pass?">Forgot Pass?</option>
  <option value="Apply for Staff">Apply for Staff</option>
</select>
<div id="message"></div>
<script type="text/javascript">
function a(){
    $("#message").text("Donation selected");
}
function b(){
    $("#message").text("Other then donation selected");
}
</script>

function displaymsg(value){
        switch(value) {
            case "Ban Appeal":
                $("#message").text("Ban Appeal description");
                break;
            case "Donation":
                $("#message").text("Donation description");
                break;
            case "Report a Player":
                $("#message").text("Report a Player description");
                break;
            case "Staff Report":
                $("#message").text("Staff Report description");
                break;
            case "Suggestion":
                $("#message").text("Suggestion description");
                break;
            default:
                $("#message").text("");
        } 
    }

    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <select style="width:200px;" onchange="displaymsg(this.value)">
      <option selected value="">select any one</option>
      <option value="Ban Appeal">Ban Appeal</option>
      <option value="Donation">Donation</option>
      <option value="Report a Player">Report a Player</option>
      <option value="Staff Report">Staff Report</option>
      <option value="Suggestion">Suggestion</option>
      <option value="Forgot Pass?">Forgot Pass?</option>
      <option value="Apply for Staff">Apply for Staff</option>
    </select>
    <div id="message"></div>