答案 0 :(得分：2)
我希望这可以帮助您完成您的工作。
categories = [{
catValue: 1,
catName: 'Arts, crafts, and collectibles'
},
{
catValue: 2,
catName: 'Baby'
},
{
catValue: 3,
catName: 'Beauty and fragrances'
},
{
catValue: 4,
catName: 'Books and magazines'
},
{
catValue: 5,
catName: 'Business to business'
},
{
catValue: 6,
catName: 'Clothing, accessories, and shoes'
},
{
catValue: 7,
catName: 'Antiques'
},
{
catValue: 8,
catName: 'Art and craft supplies'
},
{
catValue: 9,
catName: 'Art dealers and galleries'
},
{
catValue: 10,
catName: 'Camera and photographic supplies'
},
{
catValue: 11,
catName: 'Digital art'
},
{
catValue: 12,
catName: 'Memorabilia'
}
];
var categoriesJson = JSON.stringify(categories);
$(document).ready(function() {
$('.cat2').hide();
$('.cat3').hide();
$.each(JSON.parse(categoriesJson), function(key, value) {
$("#category1").append($("<option></option>").val(value.catValue).html(value.catName));
});
$("#category2").html($("#category1").html());
$("#category3").html($("#category1").html());
$("#category1").change(function() {
var cat1Value = $(this).val();
$('.cat2').show();
if (cat1Value == $("#category2").val()) {
$("#category2").val($("#category2 option:first").val());
}
if (cat1Value == $("#category3").val()) {
$("#category3").val($("#category3 option:first").val());
}
$("#category2 option").show();
$("#category3 option").show();
$("#category2 option[value=" + cat1Value + "]").hide();
$("#category3 option[value=" + cat1Value + "]").hide();
});
$("#category2").change(function() {
$('.cat3').show();
// var cat1Value = $(this).val();
// $("#category1 option[value=" + cat1Value + "]").hide();
// $("#category3 option[value=" + cat1Value + "]").hide();
});
$("#category3").change(function() {
// var cat1Value = $(this).val();
// $("#category2 option[value=" + cat1Value + "]").hide();
// $("#category1 option[value=" + cat1Value + "]").hide();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="cat1">
<label>Category 1</label>
<select id="category1" name="businessCategory">
<option>Select category</option>
</select>
</div>
<div class="cat2">
<label>Category 2</label>
<select id="category2">
</select>
</div>
<div class="cat3">
<label>Category 3</label>
<select id="category3">
</select>
</div>
答案 1 :(得分：1)
这是你正在寻找的吗？
function hide() {
selected = $("select[id^=category]").map(function() {
if ($(this).find(":selected").val() != "Select category") {
return $(this).find(":selected").text()
}
})
$("select[id^=category]").each(function() {
$(this).find("option").show();
$(this).find('option').filter(function() {
return $.inArray($.trim($(this).text()), selected) > -1;
}).hide();
})
}
我还缩短了你的代码，使其更干净。
<强>演示
categories = [{
catValue: 1,
catName: 'Arts, crafts, and collectibles'
},
{
catValue: 2,
catName: 'Baby'
},
{
catValue: 3,
catName: 'Beauty and fragrances'
},
{
catValue: 4,
catName: 'Books and magazines'
},
{
catValue: 5,
catName: 'Business to business'
},
{
catValue: 6,
catName: 'Clothing, accessories, and shoes'
},
{
catValue: 7,
catName: 'Antiques'
},
{
catValue: 8,
catName: 'Art and craft supplies'
},
{
catValue: 9,
catName: 'Art dealers and galleries'
},
{
catValue: 10,
catName: 'Camera and photographic supplies'
},
{
catValue: 11,
catName: 'Digital art'
},
{
catValue: 12,
catName: 'Memorabilia'
}
];
var categoriesJson = JSON.stringify(categories);
$(document).ready(function() {
$('.cat2').hide();
$('.cat3').hide();
$.each(JSON.parse(categoriesJson), function(key, value) {
$("#category1").append($("<option></option>").val(value.catValue).html(value.catName));
});
$("#category2").html($("#category1").html());
$("#category3").html($("#category1").html());
$("#category1").change(function() {
$('.cat2').show();
hide()
});
$("#category2").change(function() {
$('.cat3').show();
hide()
});
$("#category3").change(function() {
hide()
});
var selected = [];
function hide() {
selected = $("select[id^=category]").map(function() {
if ($(this).find(":selected").val() != "Select category") {
return $(this).find(":selected").text()
}
})
$("select[id^=category]").each(function() {
$(this).find("option").show();
$(this).find('option').filter(function() {
return $.inArray($.trim($(this).text()), selected) > -1;
}).hide();
})
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="cat1">
<label>Category 1</label>
<select id="category1" name="businessCategory">
<option>Select category</option>
</select>
</div>
<div class="cat2">
<label>Category 2</label>
<select id="category2">
</select>
</div>
<div class="cat3">
<label>Category 3</label>
<select id="category3">
</select>
</div>
<强> DEMO2
categories = [{
catValue: 1,
catName: 'Arts, crafts, and collectibles'
},
{
catValue: 2,
catName: 'Baby'
},
{
catValue: 3,
catName: 'Beauty and fragrances'
},
{
catValue: 4,
catName: 'Books and magazines'
},
{
catValue: 5,
catName: 'Business to business'
},
{
catValue: 6,
catName: 'Clothing, accessories, and shoes'
},
{
catValue: 7,
catName: 'Antiques'
},
{
catValue: 8,
catName: 'Art and craft supplies'
},
{
catValue: 9,
catName: 'Art dealers and galleries'
},
{
catValue: 10,
catName: 'Camera and photographic supplies'
},
{
catValue: 11,
catName: 'Digital art'
},
{
catValue: 12,
catName: 'Memorabilia'
}
];
var categoriesJson = JSON.stringify(categories);
$(document).ready(function() {
$('.cat2').hide();
$('.cat3').hide();
$.each(JSON.parse(categoriesJson), function(key, value) {
$("#category1").append($("<option></option>").val(value.catValue).html(value.catName));
});
$("#category2").html($("#category1").html());
$("#category3").html($("#category1").html());
$("#category1").change(function() {
$('.cat2').show();
hide()
});
$("#category2").change(function() {
$('.cat3').show();
hide()
});
$("#category3").change(function() {
hide()
});
var selected = [];
function hide() {
selected = $("select[id^=category]").map(function() {
if ($(this).find(":selected").val() != "Select category") {
return $(this).find(":selected").val()
}
})
$("select[id^=category]").each(function() {
$(this).find("option").show();
$(this).find('option').filter(function() {
return $.inArray($.trim($(this).val()), selected) > -1;
}).hide();
})
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="cat1">
<label>Category 1</label>
<select id="category1" name="businessCategory">
<option>Select category</option>
</select>
</div>
<div class="cat2">
<label>Category 2</label>
<select id="category2">
</select>
</div>
<div class="cat3">
<label>Category 3</label>
<select id="category3">
</select>
</div>