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

Question

这是我的 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);
        }
    }
});

这是表单的 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>

我想制作一个 jQuery 脚本来检测何时从 <select> 中选择特定值。表单为 name="type" 。在本例中，我想检测是否选择了“文章”或“类别”。如果选择“类别”，则会显示另外两个表单字段。当我选择值“Article”时，只有<div>包含 <select>与文章和 <div>有id="type_id"将显示，如果选择“类别”，则类似。

现在的问题是，当我选择类别并选择第二个元素时，它显示文章 <div>并隐藏 type_id如果我从选择中选择第三个元素，它会隐藏 <div>包含文章并显示 type_id .

文章形式根本不起作用；它显示但不显示 #type_id有时会隐藏类别 <div> ，有时不是。

Answer 1

好的，这里没有什么问题。首先，您要重复使用 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>

接下来，将重用的值分配给变量，这样您就不会多次遍历 DOM 来访问相同的值。另外，为了清晰起见，请重构 if/else 树。如果检查特定值，请首先执行。这样，如果您点击 else block ，您就已经知道条件为假。例如:

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

应改为:

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();
}
});

最后，如果您想将事件绑定(bind)到要添加到 DOM 的元素，则需要在添加它们之后执行此操作。当您的代码出现在您的帖子中时，您试图将事件绑定(bind)到不存在的元素 - 然后您添加该元素。反过来!