Question

我希望我的2 <select>根据单<select>更改其值，例如：

我希望我的kodethnajaran和kodesemester根据我在kodematkul上的选择更改其选项值。

这是我的代码：

<div class="form-group">
    <label>Mata Kuliah</label>
    <select class="form-control" name="kodematkul" id="kodematkul" required>
        <option value="null" selected="selected">-- Pilih --</option>
        <option value='mk001'>Mobile Programming</option>
        <option value='mk003'>Matematika Dasar</option>
        <option value='mkl001'>Logika dan Pemrograman</option>
    </select><br>    
</div>
<div class="form-group">
    <label>Tahun Ajaran</label>
    <select class="form-control" name="kodethnajaran" id="kodethnajaran" required>
        <option value="-" selected="selected">-- Pilih --</option>
        <option value='thn001'class='mk001'>2017</option>
        <option value='thn001'class='mk003'>2017</option>
        <option value='thn001'class='mkl001'>2017</option>
        <option value='thn002'class='mk003'>2016</option>
    </select><br>
</div>
<div class="form-group">
    <label>Semester</label>
    <select class="form-control" name="kodesemester" id="kodesemester" required>
        <option value="-" selected="selected">-- Pilih --</option>
        <option value='sem002'class='mk001'></option>
        <option value='sem001'class='mk003'></option>
        <option value='sem001'class='mkl001'></option>
        <option value='sem002'class='mkl001'></option>
        <option value='sem002'class='mk003'></option>
    </select><br>
</div>

上面的代码基本上只包含我的<select>和来自sql的数据。我试过的脚本是：

$("#kodethnajaran,#kodesemester").chained("#kodematkul");

我不确定这是否适用，因为我尝试根据此演示实现它：

http://www.appelsiini.net/projects/chained/demo.html

它似乎只能改变'kodethnajaran'，但不会改变'kodesemester'的价值。

这是小提琴...... https://jsfiddle.net/vu671ubm/

Answer 1

好的，所以我调查了一下，你的解决方案没有在示例中工作的原因是jQuery版本，你应该使用1.10让chained工作

这里是codePen http://codepen.io/kejt/pen/NdzZqv?editors=1111

此外，我已经更改了您的代码以便在类

上工作

$(".form-control").each(function() {
  $(this).chained($("#kodematkul"));
});

我使用的类只是一个示例，您可以为需要依赖给定的所有选择添加新类。例如dependant-select并将此类添加到应在第一次更新

上更改的所有选择

jquery链式选择基于单选两个选择

1 个答案: