Javascript 根据选择列表显示更多div和表单

以下是我的jQuery：

$('select#type').change(function(data){
    if ($('input[name=type_id]').length){
        if ($(this[this.selectedIndex]).text().trim() !== "Category" || $(this[this.selectedIndex]).text().trim() !== "Articol"){
            $("div#type_id").empty().hide();
            $('#category').show();
            $('#article').show();
        }
    } else {
        if ($(this[this.selectedIndex]).text().trim() == "Category"){
            $('select[name=category]').change(function() { 
                $('select#type').val('Category').change(); 
                $('input[name=type_id]').val($(this[this.selectedIndex]).val()); 
                console.log('inside the selector of category');
            });
            $('#category').show();
            $('#article').hide();
            $("div#type_id").append().html('<label for="">Category id</label><input disabled type="text" name="type_id" class="form-control">');
            $("div#type_id").show();
            console.log('category: ' +data);
        } else if ($(this[this.selectedIndex]).text().trim() == "Articol"){
            $('select[name=article]').change(function() { 
                $('select#type').val('Article').change(); 
                $('input[name=type_id]').val($(this[this.selectedIndex]).val()); 
            });
            $('#category').hide();
            $('#article').show();
            $("div#type_id").append().html('<label for="">Article id</label><input disabled type="text" name="type_id" class="form-control">');
            $("div#type_id").show();
            console.log('article: ' + data);
        }
    }
});

$（'select#type'）。更改（函数（数据）{
if（$（'input[name=type_id]'）.length）{
如果（$（此[this.selectedIndex]）.text（）.trim（）！==“Category”| |$（此[this.selectedIndex]）.text（）.trim（）！==“Articol”）{
$（“div#type_id”）.empty（）.hide（）；
$（“#类别”）.show（）；
$（'#article'）.show（）；
}
}否则{
if（$（this[this.selectedIndex]）.text（）.trim（）=“类别”）{
$（'select[name=category]'）。更改（函数（）{
$（'select#type'）.val（'Category'）.change（）；
$（'input[name=type_id]'）.val（$（this[this.selectedIndex]）.val（））；
console.log（'在类别选择器内'）；
});
$（“#类别”）.show（）；
$（'#article'）.hide（）；
$（“div#type_id”）.append（）.html（'Category id'）；
$（“div#type_id”）.show（）；
console.log（'类别：'+数据）；
}else if（$（this[this.selectedIndex]）.text（）.trim（）==“Articol”）{
$（'select[name=article]'）。更改（函数（）{
$（'select#type'）.val（'Article'）.change（）；
$（'input[name=type_id]'）.val（$（this[this.selectedIndex]）.val（））；
});
$（“#类别”）.hide（）；
$（'#article'）.show（）；
$（“div#type_id”）.append（）.html（'Article id'）；
$（“div#type_id”）.show（）；
console.log（'article:'+数据）；
}
}
});

以下是表单的HTML：

<div class="form-group">
    <label for="">Type</label>
    <select name="type" id="type" class="form-control">
        <option value="-">--</option>
        <option value="First">First page</option>
        <option value="Category">Category</option>
        <option value="Article">Article</option>
        <option value="Page">Page</option>
    </select>
</div>
<div id="category" style="display: none" class="form-group">
    <label for="">Category</label>
    <select name="category" id="input" class="form-control">
        <option value="-">--</option>
        <?php foreach ($category as $v): ?>
            <option value="<?=$v->id?>"><?=$v->name?></option>
        <?php endforeach ?>
    </select>
</div>
<div id="article" style="display: none" class="form-group">
    <label for="">Article</label>
    <select name="article" id="input" class="form-control">
        <option value="-">--</option>
        <?php foreach ($articles as $v): ?>
            <option value="<?=$v->id?>"><?=$v->title?></option>
        <?php endforeach ?>
    </select>
</div>
<div id="type_id" style="display: none;" class="form-group">

</div>

类型
--
首页
类别
文章
页
类别
--
好的，这里没有什么问题。首先，您正在重用ID，这绝不是一个好主意。您要确保它们是唯一的：

            <div class="form-group">
                <label>Type</label>
                <select name="type" id="selectType" class="form-control">
                    <option value="-">--</option>
                    <option value="First">First page</option>
                    <option value="Category">Category</option>
                    <option value="Article">Article</option>
                    <option value="Page">Page</option>
                </select>
            </div>
            <div id="divCategory" style="display: none" class="form-group">
                <label>Category</label>
                <select name="category" id="selectCategory" class="form-control">
                    <option value="-">--</option>
                    <?php foreach ($category as $v): ?>
                        <option value="<?=$v->id?>"><?=$v->name?></option>
                    <?php endforeach ?>
                </select>
            </div>
            <div id="divArticle" style="display: none" class="form-group">
                <label>Article</label>
                <select name="article" id="selectArticle" class="form-control">
                    <option value="-">--</option>
                    <?php foreach ($articles as $v): ?>
                        <option value="<?=$v->id?>"><?=$v->title?></option>
                    <?php endforeach ?>
                </select>
            </div>
            <div id="divType_id" style="display: none;" class="form-group">

            </div>

应改为：

if (variable == 10){
    //do something else
}
else if (variable == 11){
    //do another thing
}
else{
    //do something
}

您也可以使用switch命令并将else更改为其默认选项，但我坚持使用您使用的if/else格式

$("#selectType").on("change", function(data){ //not sure what "data" is supposed to have here that you want to write to the console, but leaving it just in case I'm missing something

var selectedOption = $(this).val();

if (selectedOption == "Category"){
    $("#divCategory").show();
    $("#divArticle").hide();
    $("#divType_id").innerhtml("blah Category blah");
    $("#divType_id").show();
}
else if (selectedOption == "Articol"){
    $("#divCategory").hide();
    $("#divArticle").show();
    $("#divType_id").innerhtml("blah Articol blah");
    $("#divType_id").show();
}
else{
    $("#divType_id").empty().hide();
    $("#divCategory").show();
    $("#divArticle").show();
}
});

最后，如果要将事件绑定到要添加到DOM中的元素，则需要在添加事件之后进行绑定。当代码出现在文章中时，您试图将事件绑定到一个不存在的元素，然后添加该元素。倒过来
 你确定这是一个最小的工作示例吗？我看到了一些东西？=$v->id？。这不应该是echo？=$v->id吗？。下一个name=“category”id=“input”和name=“article”id=“input”。为什么使用相同的ID？
$("#selectType").on("change", function(data){ //not sure what "data" is supposed to have here that you want to write to the console, but leaving it just in case I'm missing something

var selectedOption = $(this).val();

if (selectedOption == "Category"){
    $("#divCategory").show();
    $("#divArticle").hide();
    $("#divType_id").innerhtml("blah Category blah");
    $("#divType_id").show();
}
else if (selectedOption == "Articol"){
    $("#divCategory").hide();
    $("#divArticle").show();
    $("#divType_id").innerhtml("blah Articol blah");
    $("#divType_id").show();
}
else{
    $("#divType_id").empty().hide();
    $("#divCategory").show();
    $("#divArticle").show();
}
});