下拉菜单表调用选择后需要使用JQuery DataTables进行额外单击

问题描述

我有一个下拉列表，选择时应显示一个与该值相关的表。当使用此jquery代码调用表时，我选择第一个下拉列表，然后选择第二个下拉列表（用于表ID的值）。但是，一旦选择第二个下拉列表，该表就不会出现。为了显示该表格，我必须再次单击第二个下拉菜单，然后单击关闭，然后它将显示。对我在这里做错的任何建议吗？

以下是选择选项

jQuery(document).ready(function($){
    $('select[name!="dropdownmain"]').hide();
    $('select[name="' + $('select[name="dropdownmain"]').val() + '"]').show();
    $('select[name="dropdownmain"]').change(function(){
        $('select[name!="dropdownmain"]').hide();
        $('select[name="' + $(this).val() + '"]').show();
    });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid one-third">
    <select name="dropdownmain" id="" title="">
           <option value="">Select manufacturer</option>
        <option value="dropdownmain1">Cooler Master </option>
        <option value="dropdownmain2">Corsair </option>
        <option value="dropdownmain3">Logitech </option>
        <option value="dropdownmain4">Mad Catz  </option>
        <option value="dropdownmain5">Mionix   </option>
        <option value="dropdownmain6">Razer   </option>
        <option value="dropdownmain7">Roccat    </option>
        <option value="dropdownmain8">SteelSeries    </option>
    </select>
    <select name="dropdownmain1" id="" title="" class="dropdown1">
        <option value="">Choose you mouse</option>
    <option value="14">Cooler Master Alcor</option>
    <option value="15">Cooler Master Havoc</option>
    <option value="16">Cooler Master Inferno</option>
    <option value="19">Cooler Master Mizar</option>
    <option value="20">Cooler Master Reaper</option>
    <option value="21">Cooler Master Recon</option>
    <option value="22">Cooler Master Sentinel Advance II</option>
    <option value="26">Cooler Master Sentinel Advance</option>
    <option value="17">Cooler Master Sentinel III</option>
    <option value="23">Cooler Master Sentinel Z3RO-G</option>
    <option value="24">Cooler Master Spawn</option>
    <option value="25">Cooler Master Xornet</option>
    <option value="18">Cooler Master Xornet II</option>
    </select>

解决方法

实际上，您可以在没有jQuery DataTable的情况下进行操作，而可以通过常规表进行操作。

看看我的例子：

$(document).ready(function($){
    
    $("#ddManufacturer").change(function() {
             $('select[name!="dropdownmain"]').hide();
        $('select[name="' + $(this).val() + '"]').show();
    });
    
    /*$('select[name!="dropdownmain"]').hide();
    $('select[name="' + $('select[name="dropdownmain"]').val() + '"]').show();
    $('select[name="dropdownmain"]').change(function(){
        $('select[name!="dropdownmain"]').hide();
        $('select[name="' + $(this).val() + '"]').show();
    });*/
    $("#dropdownmain1").change(function() {
            loadTable($(this).val());
    });
});

function loadTable(productId) {

        $("#result").show();
    
        $.ajax({
        type: "GET",url: "https://my-json-server.typicode.com/SagnalracSO/repo/products",//contentType: "application/json; charset=utf-8",data: { id: productId },//dataType: "json",success: function (data,textStatus,jqXHR) {

                        var product = data[0];
                        
            $("#tblProdInfo").empty();
            var html = '<thead><tr>' +
                                    '<th>' + product.name + '</th>' +
                                    '<th><img src="http://whatmouse.com/wp-content/uploads/' + product.image + '" height="60px;" width="60px;" /></th></tr></thead>' +
                        '<tbody><tr>' +
                                    '<td>Launch Year</td><td>' + product.launch_year + '</td></tr>' + 
                        '<tr><td>Dimensions,mm</td><td>' + product.dimensions + '</td></tr>' +
                        '<tr><td>Weight,gramms</td><td>' + product.weight + '</td></tr></tbody>';
                        
            $("#tblProdInfo").append(html);
        },error: function (jqXHR,errorThrown) {
            console.error('There was something wrong! Error Type: ' + textStatus + '. Description: ' + errorThrown);
        }
    });
}

.one-third {
    width: 31.2%;
}

.grid {
    margin-right: 3.2%;
    float: left;
    display: inline;
    position: relative;
}

.one-third select {
    margin: 5px 0;
    width: 100%;
}

#result {
    margin: 20px 0;
}

.tablepress {
    margin-top: -10px;
    border: 1px solid #2fa5cd;
}

.tablepress {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 1em;
}

.tablepress thead th,.tablepress tfoot th {
    font-size: 15px;
    color: #fff;
    background-color: #2fa5cd;
}

.tablepress thead th {
    border-bottom: 1px solid #ddd;
}

.tablepress tbody td,.tablepress tfoot th {
    border-top: 1px solid #ddd;
}

.tablepress td,.tablepress th {
    padding: 8px;
    border: none;
    background: 0 0;
    text-align: left;
    float: none !important;
}

.tablepress tbody td {
    font-family: Tahoma;
    font-size: 13px;
    color: #414141;
    line-height: 1.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="grid one-third">
    <select id="ddManufacturer" name="dropdownmain">
        <option value="">Select manufacturer</option>
        <option value="dropdownmain1">Cooler Master </option>
        <option value="dropdownmain2">Corsair </option>
        <option value="dropdownmain3">Logitech </option>
        <option value="dropdownmain4">Mad Catz  </option>
        <option value="dropdownmain5">Mionix   </option>
        <option value="dropdownmain6">Razer   </option>
        <option value="dropdownmain7">Roccat    </option>
        <option value="dropdownmain8">SteelSeries    </option>
    </select>
    <select id="dropdownmain1" name="dropdownmain1" class="dropdown1" style="display: none;" >
        <option value="">Choose you mouse</option>
        <option value="14">Cooler Master Alcor</option>
        <option value="15">Cooler Master Havoc</option>
        <option value="16">Cooler Master Inferno</option>
    </select>
    <div id="result" style="display: none;">
      <table id="tblProdInfo" class="tablepress">
      </table>
  </div>
</div>

重要：您需要在Ajax url 属性中替换我的服务器（要获取数据的服务器），并注意我将原始网址（来自您与我共享的网站）用于图像。您需要将这些网址替换为服务器（存储它们的网址）中的网址

快乐编码！