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"的特定值。在这种情况下，我想检测是否选择了“文章”或“类别”。如果选择“类别”，则会显示另外两个表单域。当我选择值“文章”时，只会显示包含<div>文章和<select> <div>的{{1}}，如果“类别” “被选中了。

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

文章表格根本不起作用;它显示但未显示type_id，有时会隐藏类别#type_id，有时则不会。

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块，你就已经知道条件是假的。例如：

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
}

您也可以使用切换命令并将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的元素，则需要在添加它们之后执行此操作。当你的代码站在你的帖子中时，你试图将事件绑定到一个不存在的元素 - 然后你要添加元素。反过来！

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

1 个答案: