Javascript 更改第一选择记录

我有一个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>

jQuery（文档）.ready（函数（）{
$（“#类别”）。更改（函数（）{
var selectedCategory=$（“#category option:selected”）.val（）；
$.ajax({
类型：“POST”，
url:“subcategories.php”，
数据：{category:selectedCategory}
}).完成（功能（数据）{
$（“#子类别”）.html（数据）；
});
});
});

基本上，如果我的代码至少有两个选项，它就可以工作：

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

第一类
第2类

否则，如果它只有一个选项，它将无法工作，因为我无法触发更改事件：

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

第一类

---

我想让它在不使用“选择”框中的“选择…”之类的“虚拟选择”选项的情况下工作。实现这一目标的最佳方式是什么。我花了几个小时才把它弄对。

实际上，如果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>

jQuery（文档）.ready（函数（）{
$（“#类别”）.change（function（）{
getSubCat（）；//在更改事件后获取子类别
});
getSubCat（）；//加载页面后获取子类别
函数getSubCat（）{
var selectedCategory=$（“#category option:selected”）.val（）；
$.ajax({
类型：“POST”，
url:“subcategories.php”，
数据：{category:selectedCategory}
}).完成（功能（数据）{
$（“#子类别”）.html（数据）；
});
}
});

实际上，如果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>

jQuery（文档）.ready（函数（）{
$（“#类别”）.change（function（）{
getSubCat（）；//在更改事件后获取子类别
});
getSubCat（）；//加载页面后获取子类别
函数getSubCat（）{
var selectedCategory=$（“#category option:selected”）.val（）；
$.ajax({
类型：“POST”，
url:“subcategories.php”，
数据：{category:selectedCategory}
}).完成（功能（数据）{
$（“#子类别”）.html（数据）；
});
}
});

我找到了解决方案，但不知道这是否是最好的方法。等待您对此选项的关注

基本上我把密码加倍了。 一个包含更改事件，另一个仅包含选定选项：

<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>

jQuery（文档）.ready（函数（）{
var selectedCategory=$（“#category option:selected”）.val（）；
$.ajax({
类型：“POST”，
url:“subcategories.php”，
数据：{category:selectedCategory}
}).完成（功能（数据）{
$（“#子类别”）.html（数据）；
});
$（“#类别”）。更改（函数（）{
var selectedCategory=$（“#category option:selected”）.val（）；
$.ajax({
类型：“POST”，
url:“subcategories.php”，
数据：{category:selectedCategory}
}).完成（功能（数据）{
$（“#子类别”）.html（数据）；
});
});
});

---

这是正确的方法，还是我应该改变一些事情？

我已经找到了解决方案，但不知道这是否是最好的方法。等待您对此选项的关注

基本上我把密码加倍了。 一个包含更改事件，另一个仅包含选定选项：

<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>

jQuery（文档）.ready（函数（）{
var selectedCategory=$（“#category option:selected”）.val（）；
$.ajax({
类型：“POST”，
url:“subcategories.php”，
数据：{category:selectedCategory}
}).完成（功能（数据）{
$（“#子类别”）.html（数据）；
});
$（“#类别”）。更改（函数（）{
var selectedCategory=$（“#category option:selected”）.val（）；
$.ajax({
类型：“POST”，
url:“subcategories.php”，
数据：{category:selectedCategory}
}).完成（功能（数据）{
$（“#子类别”）.html（数据）；
});
});
});

---

这是正确的方法吗，或者我应该更改一些内容？

您可以在初始页面加载时将第二个设置为第一个吗？您可以在初始页面加载时将第二个设置为第一个吗？我尝试了此代码，但仅在选择框中更改时有效。@Tiago:抱歉，我现在将代码放在错误的位置选中。我尝试了此代码，但仅在选择框中更改时有效。@Tiago:抱歉我把代码放错地方了，现在检查。