我正在尝试创建一个在选择特定值时隐藏特定选项的函数。我的选择框#exampleSelect1
包含3个值:Greenline_Veranda, Profiline_Veranda, Highline_Veranda
每个值都有我需要显示的特定颜色。
颜色存储在我的数据库中,我在选择框#exampleSelect2
中填充这些颜色。但我不想显示#exampleSelect1
的所有值的所有颜色。
示例:
我的数据库中有5种颜色:Green, Blue, Purple, Pink, Yellow
首先,我在selectbox Greenline_Veranda
中选择#exampleSelect1
我只想在Green, Yellow
中为#exampleSelect2
显示颜色Greenline_Veranda
。但是当我更改#exampleSelect1
的值时,我想为该特定值显示其他颜色。
我已经有一个功能正常工作,但它有很多代码,我认为有一种更简单的方法。
以下是HTML代码:
<div class="form-group">
<label for="exampleSelect1">Ik ben op zoek naar een:</label>
<select class="form-control" id="exampleSelect1" name="typeSelect">
<option selected="selected">Selecteer een type</option>
<?php
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<option value='".$row["opzoekValue"]."'>" . $row["opzoekName"]. "</option>";
}
} else {
echo "0 results";
}
?>
</select>
</div>
<div class="form-group">
<label for="exampleSelect1">Kleurstelling:</label>
<select class="form-control" id="exampleSelect2">
<option selected="selected">Selecteer een kleur</option>
<?php
if ($resultKleur->num_rows > 0) {
// output data of each row
while($row = $resultKleur->fetch_assoc()) {
echo "<option value='".$row["kleurValue"]."'>" . $row["kleurName"]. "</option>";
}
} else {
echo "0 results";
}
?>
</select>
</div>
这是Javascript函数,用于显示特定值的特定颜色。
$(document).ready(function(){
$("#exampleSelect1").change(function() {
var val = $(this).val();
if(val == 'Greenline_Veranda') {
$('#form-zonwering').css('display', 'block');
$("select option:contains('Blauw Structuurlak')").css("display","none");
$("select option:contains('Ral 9016')").css("display","none");
$("select option:contains('Ral 9001')").css("display","none");
$("select option:contains('Brons Structuurlak')").css("display","none");
$("select option:contains('Silver Structuurlak')").css("display","none");
$("select option:contains('Licht Eiken')").css("display","none");
$("select option:contains('Donker Eiken')").css("display","none");
$("select option:contains('Zwart Structuurlak')").css("display","none");
$("select option:contains('Bruin Structuurlak')").css("display","none");
$("select option:contains('Grijs Structuurlak')").css("display","none");
$("select option:contains('Rood Structuurlak')").css("display","none");
$("select option:contains('Groen Structuurlak')").css("display","none");
$("select option:contains('Ral 9001 Structuurlak')").css("display","none");
$("select option:contains('Eluxal EV-1')").css("display","none");
} else if (val == 'Profiline_Veranda') {
$('#form-zonwering').css('display', 'block');
$("select option:contains('Blauw Structuurlak')").css("display","block");
$("select option:contains('Ral 9016')").css("display","block");
$("select option:contains('Ral 9001')").css("display","block");
$("select option:contains('Brons Structuurlak')").css("display","block");
$("select option:contains('Silver Structuurlak')").css("display","block");
$("select option:contains('Licht Eiken')").css("display","block");
$("select option:contains('Donker Eiken')").css("display","block");
$("select option:contains('Zwart Structuurlak')").css("display","block");
$("select option:contains('Bruin Structuurlak')").css("display","block");
$("select option:contains('Grijs Structuurlak')").css("display","block");
$("select option:contains('Rood Structuurlak')").css("display","block");
$("select option:contains('Groen Structuurlak')").css("display","block");
$("select option:contains('Ral 9001 Structuurlak')").css("display","block");
$("select option:contains('Eluxal EV-1')").css("display","block");
$("select option:contains('Antraciet Structuurlak')").css("display","block");
$("select option:contains('Ral 9010 Structuurlak')").css("display","none");
} else {
$('#form-zonwering').css('display', 'none');
$("select option:contains('Blauw Structuurlak')").css("display","block");
$("select option:contains('Ral 9016')").css("display","block");
$("select option:contains('Ral 9001')").css("display","block");
$("select option:contains('Brons Structuurlak')").css("display","block");
$("select option:contains('Silver Structuurlak')").css("display","block");
$("select option:contains('Licht Eiken')").css("display","block");
$("select option:contains('Donker Eiken')").css("display","block");
$("select option:contains('Zwart Structuurlak')").css("display","block");
$("select option:contains('Bruin Structuurlak')").css("display","block");
$("select option:contains('Grijs Structuurlak')").css("display","block");
$("select option:contains('Rood Structuurlak')").css("display","block");
$("select option:contains('Groen Structuurlak')").css("display","block");
$("select option:contains('Ral 9001 Structuurlak')").css("display","block");
$("select option:contains('Eluxal EV-1')").css("display","block");
}
});
});
所以我的问题是,我可以缩短Javascript功能,以便在更多选择框上使用它吗?
答案 0 :(得分:0)
这是一段代码。
<div class="form-group">
<label for="exampleSelect1">Ik ben op zoek naar een:</label>
<select class="form-control" id="exampleSelect1" name="typeSelect">
<option selected="selected" value="">Selecteer een type</option>
<option value="Greenline_Veranda">Greenline Veranda</option>
<option value="Profiline_Veranda">Profiline Veranda</option>
</select>
</div>
<div class="form-group">
<label for="exampleSelect2">Kleurstelling:</label>
<select class="form-control" id="exampleSelect2">
<option selected="selected">Selecteer een kleur</option>
<option attr-value="Greenline_Veranda">Greenline Veranda</option>
<option attr-value="Profiline_Veranda">Profiline Veranda</option>
<option attr-value="Greenline_Veranda">Greenline Veranda</option>
<option attr-value="Profiline_Veranda">Profiline Veranda</option>
<option attr-value="Greenline_Veranda">Greenline Veranda</option>
<option attr-value="Profiline_Veranda">Profiline Veranda</option>
<option attr-value="Greenline_Veranda">Greenline Veranda</option>
<option attr-value="Profiline_Veranda">Profiline Veranda</option>
<option attr-value="Greenline_Veranda">Greenline Veranda</option>
<option attr-value="Profiline_Veranda">Profiline Veranda</option>
</select>
</div>
$(document).ready(function(){
$("#exampleSelect1").change(function() {
var val = $(this).val();
if(val == ''){
$("#exampleSelect2").find("option").show();
}else{
$("#exampleSelect2").find("option:not([attr-value='"+val+"'])").hide();
$("#exampleSelect2").find("option[attr-value='"+val+"']").show();
}
});
});
您可以将第一个选择选项的值绑定到第二个选择选项的attr值。这是一个有效的fiddle