Question

我需要在onchange函数的基础上附加标签。它已附加，但在单击下拉菜单时无法查看。

$(document).ready(function(){
     $('select').formSelect();
});


a=['16MA401','16ME401','16ME402','16ME403','16ME404','16ME405','16EEG02','16EEG03']
b=['16ME601','16ME602','16ME603','16ME604','16MEE07','16ME605','16ME606','16ME607']
$('#class').on('change', function(){ 
    $('#sub').html('');
    c=document.getElementById('class').value;
    console.log(c)
    if (c=='2a' || c=='2b') {
        for (var i = 0; i < a.length; i++) {
          $('#sub').append('<option value='+a[i]+'>'+a[i]+'</option>');}
        }
    else{
        for (var i = 0; i < a.length; i++) {
          $('#sub').append('<option value='+b[i]+'>'+b[i]+'</option>');}
        }
    }
  );

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"> </script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.js"></script>
</head>
<body>
    <form action="" method="POST">
        <div class="row ">
            <div class="input-field col s6">
                Class 
                <select required id="class" name="clas">
                <option selected disabled>Select class</option>
                <option value="2a">2a</option>
                <option value="2b">2b</option>
                <option value="3a">3a</option>
                <option value="3b">3b</option>
                </select>
            </div>
            <div class="input-field col s6">
                Subject
                <select required id="sub" name="sub">
                <option selected disabled>Select class</option>
                </select>
            </div>
            <div class="input-field col s2 offset-s5">
                <input type="submit" class="btn" name="btn" value="Submit">
            </div>
        </div>
    </form>
</body>

在第一个下拉菜单中选择了一些选项之后，第二个下拉菜单innerhtml会根据第一个选项进行更改。

在控制台中，我得到了：

$（sub）.html（）;

'<option value=\"16ME601\">16ME601</option><option value=\"16ME602\">16ME602</option><option value=\"16ME603\">16ME603</option><option value=\"16ME604\">16ME604</option><option value=\"16MEE07\">16MEE07</option><option value=\"16ME605\">16ME605</option><option value=\"16ME606\">16ME606</option><option value=\"16ME607\">16ME607</option>'

Answer 1

提供.append()而不是.formSelect().append()代替add $('select').formSelect();

Answer 2

谢谢@smartmanoj。根据您的建议，我对我的代码未做任何改动。

    $('#class').on('change', function(){ 
    $('#sub').html('');
    c=document.getElementById('class').value;
    console.log(c)
    if (c=='2a' || c=='2b') {
        for (var i = 0; i < a.length; i++) {
          $('#sub').append('<option value='+a[i]+'>'+a[i]+'</option>');}
        }
    else{
        for (var i = 0; i < a.length; i++) {
          $('#sub').append('<option value='+b[i]+'>'+b[i]+'</option>');}
        }
    $('#sub').formSelect()    //added this line
    }
  );

MaterlizeCSS：无法附加到“选择”选项

2 个答案: