Question

我有两个选择标签。他们的身份证是“学习阶段”和“学习年”。我希望当研究阶段的价值处理CSS代码时。

HTML：

<select name="study-phase" onchange="myFunction()" id="study-phase" class="sp-input">
    <option value=""></option>
    <option id="pri" value="pri">Primary</option>
    <option id="pre" value="pre">Prep</option>
    <option id="sec" value="sec">Secondary</option>
</select>   
<select name="study-year" id="study-year" class="sp-input">
    <option value=""></option>
    <option id="a" value="aa">Grade 1</option>
    <option id="b" value="">Grade 2</option>
    <option id="c" value="">Grade 3</option>
    <option id="d" value="">Grade 4</option>
    <option id="e" value="">Grade 5</option>
    <option id="f" value="">Grade 6</option>
    <option id="g" value="">Grade 7</option>
    <option id="h" value="">Grade 8</option>
    <option id="i" value="">Grade 9</option>
    <option id="j" value="">Grade 10</option>                       
</select>
<style type="text/css">
    #a , #b , #c , #d , #f , #g , #h , #j , #k , #e , #i {
        display: none;
    }
</style>

JS：

$(function(myFunction()){
   if (document.getElementById("study-phase").value == "pri") {
       document.getElementById("a").style.display = "block";
   }
});

运行代码后，我想要的css代码不会启动。这有什么问题？

Answer 1

$(function(myFunction()){
    if (document.getElementById("study-phase").value == "pri") {
        document.getElementById("a").style.display = "block";
    }});

给出错误

Uncaught SyntaxError: Unexpected token (

除非您修改了下面的代码，否则它会起作用，因为它是vanillaJs，你不需要jquery

function myFunction() {
  if (document.getElementById("study-phase").value == "pri") {
    document.getElementById("a").style.display = "block";
  }
};

<select name="study-phase" onchange="myFunction()" id="study-phase" class="sp-input">
    <option value=""></option>
    <option id="pri" value="pri">Primary</option>
    <option id="pre" value="pre">Prep</option>
    <option id="sec" value="sec">Secondary</option>
</select>
<select name="study-year" id="study-year" class="sp-input">
    <option value=""></option>
    <option id="a" value="aa">Grade 1</option>
    <option id="b" value="">Grade 2</option>
    <option id="c" value="">Grade 3</option>
    <option id="d" value="">Grade 4</option>
    <option id="e" value="">Grade 5</option>
    <option id="f" value="">Grade 6</option>
    <option id="g" value="">Grade 7</option>
    <option id="h" value="">Grade 8</option>
    <option id="i" value="">Grade 9</option>
    <option id="j" value="">Grade 10</option>                       
</select>
<style type="text/css">
  #a,
  #b,
  #c,
  #d,
  #f,
  #g,
  #h,
  #j,
  #k,
  #e,
  #i {
    display: none;
  }
</style>

Answer 2

<强> HTML

<select name="study-phase" onchange="myFunction()" id="study-phase" class="sp-input">
    <option value=""></option>
    <option id="pri" value="pri">Primary</option>
    <option id="pre" value="pre">Prep</option>
    <option id="sec" value="sec">Secondary</option>
</select>
<select name="study-year" id="study-year" class="sp-input">
    <option value=""></option>
    <option id="a" value="aa">Grade 1</option>
    <option id="b" value="">Grade 2</option>
    <option id="c" value="">Grade 3</option>
    <option id="d" value="">Grade 4</option>
    <option id="e" value="">Grade 5</option>
    <option id="f" value="">Grade 6</option>
    <option id="g" value="">Grade 7</option>
    <option id="h" value="">Grade 8</option>
    <option id="i" value="">Grade 9</option>
    <option id="j" value="">Grade 10</option>                       
</select>
<style type="text/css">
  #a,
  #b,
  #c,
  #d,
  #f,
  #g,
  #h,
  #j,
  #k,
  #e,
  #i {
    display: none;
  }
</style>

<强> JS：

function myFunction(){
     console.log("myFunction gets called");
    if (document.getElementById("study-phase").value == "pri") {
        document.getElementById("a").style.display = "block";
    }}

只需声明您的功能即可。并添加一个console.log以确保该函数被称为“onchange”，这是在此更改之后。

Answer 3

尝试使用.change()事件：

<强> HTML

<select name="study-phase" id="study-phase" class="sp-input">
    <option value=""></option>
    <option id="pri" value="pri">Primary</option>
    <option id="pre" value="pre">Prep</option>
    <option id="sec" value="sec">Secondary</option>
</select>   
<select name="study-year" id="study-year" class="sp-input">
    <option value=""></option>
    <option id="a" value="aa">Grade 1</option>
    <option id="b" value="">Grade 2</option>
    <option id="c" value="">Grade 3</option>
    <option id="d" value="">Grade 4</option>
    <option id="e" value="">Grade 5</option>
    <option id="f" value="">Grade 6</option>
    <option id="g" value="">Grade 7</option>
    <option id="h" value="">Grade 8</option>
    <option id="i" value="">Grade 9</option>
    <option id="j" value="">Grade 10</option>                       
</select>

<强> JS

 $(function(){
   $('#study-phase').change(function(){
     if ($("#study-phase").val() == "pri") {
        $("#a").css('display','block');
     }
   });

 });

Answer 4

您的JavaScript无效。

此外，我认为您希望在第一次更改后第二次下拉菜单中的一个选项。

您可以进一步构建此逻辑

以下是最小代码示例：

function myFunction() {

  if (document.getElementById("study-phase").value == "pri")
    document.getElementById("study-year").value = "aa";
};

<select name="study-phase" onchange="myFunction()" id="study-phase" class="sp-input">
    <option value=""></option>
    <option id="pri" value="pri">Primary</option>
    <option id="pre" value="pre">Prep</option>
    <option id="sec" value="sec">Secondary</option>
</select>
<select name="study-year" id="study-year" class="sp-input">
    <option value=""></option>
    <option id="a" value="aa">Grade 1</option>
    <option id="b" value="">Grade 2</option>
    <option id="c" value="">Grade 3</option>
    <option id="d" value="">Grade 4</option>
    <option id="e" value="">Grade 5</option>
    <option id="f" value="">Grade 6</option>
    <option id="g" value="">Grade 7</option>
    <option id="h" value="">Grade 8</option>
    <option id="i" value="">Grade 9</option>
    <option id="j" value="">Grade 10</option>                       
</select>

Answer 5

你可以这样做：

＆＃13;

@JsonIgnore
@Transient
private AtomicInteger accessCounter = new AtomicInteger(0);

＆＃13;

$(document).ready(function() {
  $("#study-phase").on("change", function() {
    if (document.getElementById("study-phase").value === "pri") {
      $('option#a').show();
    }
  });
});

＆＃13;

#a,
#b,
#c,
#d,
#f,
#g,
#h,
#j,
#k,
#e,
#i {
  display: none;
}

＆＃13;

Answer 6

您需要在调用函数之前定义函数，

例如，在第一个选择（示例1）中，我调用一个尚未定义但没有任何反应的函数（请参阅控制台以获取错误）

在第二个选择（例2）中我首先定义它，然后调用它。

这使得html布局混乱，其中包含随机脚本，因此您可以使用jquery来监听事件（示例3）。

$('.myselect').change(function(){})

示例：https://jsfiddle.net/hbmrktbj/

Answer 7

要完成这个jquery会更有效，所以你只需要做一些这样的事情： -

1.Remove onchange =＆＃34; myFunction（）＆＃34;形成你的选择

2.在您的脚本上添加此代码： -

 $('#study-phase').on('change',function(){
 if ($(this).val() == "pri") {
    $("#a")css('display','block');
 }});

它会正常工作

Answer 8

我想你想要的是当你在第一个选择值pri时选择第二个值aa。当你使用jquery时，我会给你一个例子。

 $( document ).ready(function() {
  $("#study-phase").change(function(){
  if($(this).val() === "pri")
    {
       $("#study-year").val("aa");
    }
  });
})

https://codepen.io/anon/pen/VWLaqv

onchange =“”在select标签中不起作用

8 个答案: