Question

我有一个JavaScript代码，可以根据第一个选择框填充第二个选择框，但是我有一些麻烦使它正常工作。

如果我有至少2个选择值，则在更改事件时它会正确触发下一个选择框，但如果我只有一个选项，因为更改事件是不可能的，我怎么能让它触发下一个选择带有加载值的框？

<script type="text/javascript">
jQuery(document).ready(function() { 
$("#category").change(function(){
var selectedCategory = $("#category option:selected").val();
$.ajax({
    type: "POST",
    url: "subcategories.php",
    data: { category : selectedCategory } 
}).done(function(data){
    $("#subcategory").html(data);
});
});

});
</script>

基本上，如果我的代码至少有2个选项，那就可以了：

<select name="category" class="form-control" id="category">
<option value="1">Category 1</option>
<option value="2">Category 2</option>
</select>

其他如果它只有一个选项它不起作用，因为我无法触发更改事件：

<select name="category" class="form-control" id="category">
<option value="1">Category 1</option>
</select>

我想在不使用＆＃34;虚拟选择选项的情况下使其工作，如＆＃34; ＆＃34;选择...＆＃34;在选择框中。什么是实现它的最佳方式。我花了好几个小时才能把它弄好。

Answer 1

实际上，如果select标签中只有一个选项，则不会更改事件。在加载文档之后创建一个函数并调用，也可以在更改事件中调用

<script type="text/javascript">
    jQuery(document).ready(function() {
        $("#category").change(function(){ 
            getSubCat();//get sub category after change event
        });
        getSubCat();//get sub category after page load
        function getSubCat(){
            var selectedCategory = $("#category option:selected").val();
            $.ajax({
                type: "POST",
                url: "subcategories.php",
                data: { category : selectedCategory } 
            }).done(function(data){
                $("#subcategory").html(data);
            });
        }
    });
</script>

Answer 2

我找到了解决方案，但不知道它是否是最佳方式。等待您对此选项的担忧。

基本上我把代码加倍了。一个是变更事件，另一个是选中的选项：

<script type="text/javascript">
jQuery(document).ready(function() { 

var selectedCategory = $("#category option:selected").val();
$.ajax({
    type: "POST",
    url: "subcategories.php",
    data: { category : selectedCategory } 
}).done(function(data){
    $("#subcategory").html(data);
});

$("#category").change(function(){
var selectedCategory = $("#category option:selected").val();
$.ajax({
    type: "POST",
    url: "subcategories.php",
    data: { category : selectedCategory } 
}).done(function(data){
    $("#subcategory").html(data);
});
});

});
</script>

这是正确的方法吗，或者我应该改变什么？

更改第一个选择记录

2 个答案: