jquery 为下拉 select

Question

这是我的索引文件代码。 每当我 select 进入下拉菜单时，然后显示相关的下拉菜单。

我将此代码放在我的文件中，但在选择主要类型后我无法下拉。

css 文件代码 is.hide{display:none;}

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $('#mode').on('change', function () {
    var value = $("#mode option:selected").val();
    $('.hide').slideUp('fast').find('select').val('');
    $('#' + value).show('slow');
});
  </script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>  
<div class="">
    <label class="control-label">Mode</label>
    <select class="input-large m-wrap" name="mode" id="mode" required>
        <option value=""></option>
        <option value="general">General Knowledge</option>
        <option value="preparatory">Preparatory Exam</option>
    </select>
</div>
<div class=" hide" id="general">
    <br>
    <label class="control-label">Module</label>
    <select class="input-large m-wrap" name="module" id="sub">
        <option value=""></option>
        <option value="Module 1">Module 1</option>
        <option value="Module 2">Module 2</option>
    </select>
</div>
<div class=" hide" id="preparatory">
    <br>
    <label class="control-label">Exam</label>
    <select class="input-large m-wrap" name="exam" id="sub">
        <option value=""></option>
        <option value="A1">A1</option>
        <option value="A2">A2</option>
    </select>
</div>
</body>
</html>

Answer 1

您的问题是 type class=" hide"更改为class="hide"

并且您需要将script移动到关闭body标记而不是head标记之前。

 $('#mode').on('change', function () { var value = $("#mode option:selected").val(); //$('.hide').show(); $('.hide').slideUp('fast').find('select').val(''); $('#' + value).show('slow'); });

 .hide{ display:none; }

 <:DOCTYPE html> <html> <head> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> </script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class=""> <label class="control-label">Mode</label> <select class="input-large m-wrap" name="mode" id="mode" required> <option value=""></option> <option value="general">General Knowledge</option> <option value="preparatory">Preparatory Exam</option> </select> </div> <div class="hide" id="general"> <br> <label class="control-label">Module</label> <select class="input-large m-wrap" name="module" id="sub"> <option value=""></option> <option value="Module 1">Module 1</option> <option value="Module 2">Module 2</option> </select> </div> <div class=" hide" id="preparatory"> <br> <label class="control-label">Exam</label> <select class="input-large m-wrap" name="exam" id="sub"> <option value=""></option> <option value="A1">A1</option> <option value="A2">A2</option> </select> </div> </body> </html>

jquery 为下拉 select

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-05-13 07:14:54

jquery 为下拉 select

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-05-13 07:14:54

解决方案1
2 已采纳 2020-05-13 07:14:54