onChange for dropdown

时间:2017-10-03 00:31:42

标签: javascript html css

我有一个下拉列表,当选择一个选项时,应该动态显示div部分。不幸的是,我研究过的代码并没有起作用。

CSS:

def rounders(value):
    count = 0
    while value >= 10:
        value = round(value / 10, 0)
        count += 1
    return value * (10 ** count)

这是我的代码的一部分:HTML

body {
        background-image: url(http://fjordstudio.dk/assets/img/bg/diamonds.png);
        color: white;
    }
    #container {
        background-color: grey;
        border: solid thick black;
        border-radius: 45px;
        text-align: center;
        width: 40%;
        margin: 0 auto;
    }
    #complaintDrop {
        display: None;
    }

的Javascript(jQuery的):

<form name = "form1" method = "post" id = "complaintForm">
<div id = "container">
    <div id = "drop1">
        <p>
          <label>Please Select your reason for contacting us.
            <select name="contactType" id="contactType" onchange = "complaining()">
              <option value="C" id = "empty">Select a Reason</option>
              <option value="C" id = "complaints">Complaints</option>
              <option value="T" id = "technicalPr">Technical Problems</option>
              <option value="P" id = "productIss">Product Issues</option>
            </select>
          </label>
        </p>
    </div><!--end of drop-->
    <!--<ol>
      <li>When  Complaints are selected please dynamically create and display a new drop down list that includes at least four options of your choice.</li>
      <li>When Technical Problems are selected please dynamically create and display at least four types of problems with an associated checkbox.</li>
      <li>When Product Issues aer selected please dynamically create and display at least four types options as a grouped set of radio buttons. </li>
      <li>When a new option is selected your script should remove any of the dynamic content. </li>
    </ol>-->
    <div id = "complaintDrop">
        <p>Select a Complaint:
            <select name = "complaints" id = "complaints1">
                <option value = "load">App Takes too Long to Load</option>
                <option value = "colors">Poor Color Design</option>
                <option value = "fit">Some Content Does Not Show</option>
            </select>
        </p>
    </div><!--end of complaintDrop-->

整个文件:

<script src = "jquery-3.2.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>

$(document).ready(function(e) {

function complaining() {
        $("#complaintDrop").css("display", "block");
    }

}
</script>

投诉Drop的div通过CSS隐藏。当我选择&#34;投诉&#34;从下拉列表中,我想显示complaintDrop div。但唉,它仍然是隐藏的。我对onClick事件有很多练习,但对于onChange却没有那么多。这是我认为我需要在这里使用的。任何帮助都会很棒。谢谢。

0 个答案:

没有答案