我是jQuery的新手，我正在尝试创建一个动态下拉菜单，其中当您单击单选按钮时内容会发生变化。这是我的html和javascript代码：
Html代码：
<div class="input-group">
Private Museum
<input type="radio" id="PublicPrivate1" name="publicPrivate" value="private museum" checked>
Public Museum
<input type="radio" id="PublicPrivate2" name="publicPrivate">
<select class="form-control" name="museum_type" id="museum_type">
</select>
</div>
jQuery脚本：
<script>
$("input[type='radio'][name='publicPrivate']").change(function () {
var selected = $("input[type='radio'][name='publicPrivate']:checked").val();
if (selected.equals("private museum")){
var opts = [
{name: "Please Select", val: ""},
{name: "School-based", val: "1"},
{name: "Religious Institution", val: "2"},
{name: "Organization", val: "3"},
{name: "Foundation", val: "4"}
];
}
else{
var opts = [
{name: "Please Select", val: ""},
{name: "School-based", val: "1"},
{name: "Local Government Unit", val: "2"},
{name: "National Agency", val: "3"}
];
}
$("#museum_type").empty();
$.each(opts, function (k, v) {
$("#museum_type").append("<option value='" + v.val + "'>" + v.name + "</option>");
});
});
</script>
iCheck代码（检查评论我之所以包含此内容）：
<script src="plugins/iCheck/icheck.min.js"></script>
<script>
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
});
</script>
答案 0 :(得分：0)
它没有识别selected.equals。如果您将其更改为if（选择==＆＃34;私人博物馆＆＃34;）它将起作用。
$("input[type='radio'][name='publicPrivate']").change(function () {
var selected = $("input[type='radio'][name='publicPrivate']:checked").val();
if (selected =="private museum"){
var opts = [
{name: "Please Select", val: ""},
{name: "School-based", val: "1"},
{name: "Religious Institution", val: "2"},
{name: "Organization", val: "3"},
{name: "Foundation", val: "4"}
];
}
else{
var opts = [
{name: "Please Select", val: ""},
{name: "School-based", val: "1"},
{name: "Local Government Unit", val: "2"},
{name: "National Agency", val: "3"}
];
}
$("#museum_type").empty();
$.each(opts, function (k, v) {
$("#museum_type").append("<option value='" + v.val + "'>" + v.name + "</option>");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
Private Museum
<input type="radio" id="PublicPrivate1" name="publicPrivate" value="private museum" checked>
Public Museum
<input type="radio" id="PublicPrivate2" name="publicPrivate">
<select class="form-control" name="museum_type" id="museum_type">
</select>
</div>
答案 1 :(得分：0)
下拉列表中应该有一些初始列表，因为您选择了一个单选按钮。
并且equals不是javascript或jquery中的方法，因此请使用==或===
$("input[type='radio'][name='publicPrivate']").change(function () {
debugger;
var selected = $("input[type='radio'][name='publicPrivate']:checked").val();
if (selected=="private museum"){
var opts = [
{name: "Please Select", val: ""},
{name: "School-based", val: "1"},
{name: "Religious Institution", val: "2"},
{name: "Organization", val: "3"},
{name: "Foundation", val: "4"}
];
}
else{
var opts = [
{name: "Please Select", val: ""},
{name: "School-based", val: "1"},
{name: "Local Government Unit", val: "2"},
{name: "National Agency", val: "3"}
];
}
$("#museum_type").empty();
$.each(opts, function (k, v) {
$("#museum_type").append("<option value='" + v.val + "'>" + v.name + "</option>");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<input type="radio" id="PublicPrivate1" name="publicPrivate" value="private museum" checked>
Private Museum
</input>
<input type="radio" id="PublicPrivate2" name="publicPrivate">
Public Museum</input>
<select class="form-control" name="museum_type" id="museum_type">
<option value="0">Please Select</option>
<option value="1">School-based</option>
<option value="2">Religious Institution</option>
<option value="3">Organization</option>
<option value="4">Foundation</option>
</select>
</div>
答案 2 :(得分：0)
您的代码可以通过多种方式简化。
我已经做了一个示例，并在下面的代码中添加了注释，以便您了解已完成/可以更改的内容。
//this function is called on page load (shorthand to $(document).ready(function(){});
$(function() {
//defined an object to store both "private" and "public" options
var $opts = {
private: [{
name: "Please Select",
val: ""
}, {
name: "School-based",
val: "1"
}, {
name: "Religious Institution",
val: "2"
}, {
name: "Organization",
val: "3"
}, {
name: "Foundation",
val: "4"
}],
public: [{
name: "Please Select",
val: ""
}, {
name: "School-based",
val: "1"
}, {
name: "Local Government Unit",
val: "2"
}, {
name: "National Agency",
val: "3"
}]
}
//calling this function to populate your select on page load
fillSelect();
$('.option').change(function() {
//added a common class to both radios and resumed the event to a function call
fillSelect();
});
//function that gets the current selected radio and calls another function sending the respective object to fill
function fillSelect() {
var selected = $('.option:checked').val();
if (selected == 'private museum') {
appendOptions($opts.private);
} else {
appendOptions($opts.public);
}
}
//function that populates the select according to the received object as parameter
function appendOptions(options) {
$("#museum_type").empty();
$.each(options, function(k, v) {
$("#museum_type").append("<option value='" + v.val + "'>" + v.name + "</option>");
});
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
Private Museum
<input type="radio" id="PublicPrivate1" class="option" name="publicPrivate" value="private museum" checked> Public Museum
<input type="radio" id="PublicPrivate2" class="option" name="publicPrivate">
<select class="form-control" name="museum_type" id="museum_type">
</select>
</div>