下拉选择的jquery

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了下拉选择的jquery相关的知识,希望对你有一定的参考价值。

这是我的索引文件代码,每当我选择某项内容进入下拉菜单时,就会显示相关的下拉菜单,我把这段代码放在我的文件中,但我无法在选择主类型后获得下拉菜单。

我把这个代码放在我的文件中,但我不能得到下拉后选择主类型。

css文件代码是.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>
答案

你的问题是类型 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的主要内容,如果未能解决你的问题,请参考以下文章

“jquery”中怎么让下拉框不能选择?

jquery依赖下拉菜单选择

jQuery插件——下拉选择框

在下拉菜单中针对特定选择器 jquery 的问题

如何在文本区域标签中的特定光标位置插入选择标签下拉值作为文本片段?

识别 jQuery 中的 HTML 下拉选择