如何根据select标记中的值显示某些选项?
function key(id){
var selectValue = document.getElementById('names').value
= document.carmakes.cars.selectedIndex
var selectOption = $("#names option:selected").val();
}
<select size='5' name='carmakes' onchange='key(id)'>
<option selected='selected' value="-1">Car makes</option>
<option>BMW</option>
<option>Audi</option>
</select>
<select required='required' size='5' type='text' id='names'>
<option selected="selected" value="0" >Car names</option>
<option value="1">X5</option>
<option value="2">Q5</option>
答案 0 :(得分:1)
检查一下:http://www.sanwebe.com/2013/05/select-box-change-dependent-options-dynamically
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
//let's create arrays
var chocolates = [
{display: "Dark chocolate", value: "dark-chocolate" },
{display: "Milk chocolate", value: "milk-chocolate" },
{display: "White chocolate", value: "white-chocolate" },
{display: "Gianduja chocolate", value: "gianduja-chocolate" }];
var vegetables = [
{display: "Broccoli", value: "broccoli" },
{display: "Cabbage", value: "cabbage" },
{display: "Carrot", value: "carrot" },
{display: "Cauliflower", value: "cauliflower" }];
var icecreams = [
{display: "Frozen yogurt", value: "frozen-yogurt" },
{display: "Booza", value: "booza" },
{display: "Frozen yogurt", value: "frozen-yogurt" },
{display: "Ice milk", value: "ice-milk" }];
//If parent option is changed
$("#parent_selection").change(function() {
var parent = $(this).val(); //get option value from parent
switch(parent){ //using switch compare selected option and populate child
case 'chocolates':
list(chocolates);
break;
case 'vegetables':
list(vegetables);
break;
case 'icecreams':
list(icecreams);
break;
default: //default child option is blank
$("#child_selection").html('');
break;
}
});
//function to populate child select box
function list(array_list)
{
$("#child_selection").html(""); //reset child options
$(array_list).each(function (i) { //populate child options
$("#child_selection").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>");
});
}
});
</script>
</head>
<body>
<div class="wrapper">
Category : <select name="parent_selection" id="parent_selection">
<option value="">-- Please Select --</option>
<option value="chocolates">Chocolates</option>
<option value="vegetables">Vegetables</option>
<option value="icecreams">Ice cream</option>
</select>
<select name="child_selection" id="child_selection">
</select>
</div>
</body>
</html>
答案 1 :(得分:0)
一个工作示例:http://jsfiddle.net/20omnz2c/
$('#carmakes').on('change', function () {
var selected = $(this).val().toLowerCase();
if (selected != '0') {
$('#names').show();
$('#names option').hide(); //hide all options initially
$('#names option:eq(0)').show(); //show the first option
$('#names option.' + selected).show(); //show options with the right class
} else {
$('#names').hide();
$('#names option').hide();
}
});