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

Question

I have a list of dropdown items, that when selected should bring up a table connected to the value.使用此 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>

Answer 1

其实不用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, textStatus, 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 属性中替换我的服务器（您要获取数据的服务器），并注意我使用原始网址（来自您与我共享的网站）来获取图像。您需要用您的服务器（存储它们的位置）中的 url 替换这些 url