Ran*_*ndy 36 html jquery select
我有两个选择:
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
如果我在第一个选择中选择Fruit,我该如何使用jQuery呢？第二个选择只会向我展示水果 - 香蕉,苹果,橙.如果我在第一个选择中选择Bird,第二个选择将只显示Birds - Eagle,Hawk.等等...
我试着用这段jQuery代码做到这一点:
$("#select1").change(function() {
var id = $(this).val();
$('#select2 option[value!='+id+']').remove();
});
不幸的是,它删除了几乎所有东西,我不知道如何带回一些选项.我也读过有关克隆的内容,但在这种情况下我不知道如何使用它.
sab*_*ker 67
$("#select1").change(function() {
if ($(this).data('options') === undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>使用jQuery data()来存储数据
我猜隐藏元素不能跨浏览器工作(2012),我自己没有测试过.
Xit*_*ogy 11
我想创建一个使用来自单独的JSON文件的$ .getJSON()的版本.
演示:这里
JavaScript的:
$(document).ready(function () {
"use strict";
var selectData, $states;
function updateSelects() {
var cities = $.map(selectData[this.value], function (city) {
return $("<option />").text(city);
});
$("#city_names").empty().append(cities);
}
$.getJSON("updateSelect.json", function (data) {
var state;
selectData = data;
$states = $("#us_states").on("change", updateSelects);
for (state in selectData) {
$("<option />").text(state).appendTo($states);
}
$states.change();
});
});
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<select id="us_states"></select>
<select id="city_names"></select>
<script type="text/javascript" src="updateSelect.js"></script>
</body>
</html>
JSON:
{
"NE": [
"Smallville",
"Bigville"
],
"CA": [
"Sunnyvale",
"Druryburg",
"Vickslake"
],
"MI": [
"Lakeside",
"Fireside",
"Chatsville"
]
}
将所有#select2选项存储在变量中,根据所选选项的值对其进行过滤#select1,并使用以下内容.html()进行设置#select2:
var $select1 = $( '#select1' ),
$select2 = $( '#select2' ),
$options = $select2.find( 'option' );
$select1.on('change', function() {
$select2.html($options.filter('[value="' + this.value + '"]'));
}).trigger('change');