Question

filterJobs: function()
{
    var team = $('#selectOne').val();
    var specialty = $('#selectTwo').val();
    var level = $('#selectThree').val();
    //var defSelectTeam=

    $('.jobs').hide()
            .filter('[data-team="' + team + '"][data-specialization="' + specialty + '"][data-level="' + level + '"]')
            .show();
    var newNumJobs = $('.jobs:visible').length;
    $('table:visible:odd').css({'background-color': ' #F1F1F1'});
    $('table:visible:even').css({'background-color': '#FFFFFF'});
    if (newNumJobs <= this.pageSize)
    {
        $("#dvJobs span").text("Showing " + newNumJobs + " of " + newNumJobs + " jobs");
    }
    else
    {
        $("#dvJobs span").text("Showing " + this.pageSize + " of " + newNumJobs + " jobs");
    }

    this.buildPaginator(newNumJobs);
},

大家好任何线索如何修改此过滤功能以进行选择过滤现在它可以正常工作，我需要设置一个默认值，在更改过滤之前显示所有选项？我只需要指向正确的大方向，我是js的废话，但试图改进。提前致谢， html是这个//////，它通过从表中获取数据属性，该部分工作正常，只需要设置默认值，我想设置几个数据attrs，但这似乎凌乱。或者设置一个检查值的if块，如果它的'select one'显示全部。抱歉漫无目的。

<select id="selectOne">
    <option value="Select One">Select One </option>
    <option value="Engineering">Engineering </option>
    <option value="SoftwareDevelopment" >Software Development</option>
    <option value="HumanResources" >Human Resources</option>
    <option value="MarkettingAndSales">Marketting and Sales</option>
    <option value="Administrative">Administrative</option>
    <option value="Others">Others</option>
</select>
<label>Specialty:</label>
<select id="selectTwo">
    <option class="Select One" >Select One </option>
    <option class="MarkettingAndSales" value="Sales">Sales </option>
    <option class="HumanResources" value="Recruitment">Recruitment </option>
    <option class="Administrative" value="OfficeGeneral">Office General </option>
    <option class="Engineering SoftwareDevelopment" value="WebDevelopment">Web Development </option>
    <option  class="SoftwareDevelopment" value="ApplicationDevelopment">Application Development </option>
    <option class="SoftwareDevelopment" value="UIUXDesign">UI/UX Design</option>
    <option class="Others" value="ScientificResearch">Scientific Research</option>
    <option  class="Engineering Others" value="ComputerHardwareNetworking">Computer Hardware  Networking</option>
    <option  class="Others" value="Others">Others</option>
</select>
<label>Level:</label>
<select id="selectThree">
    <option>Senior</option>
    <option>Intermediate</option>
    <option>Junior</option>
</select>

提前致谢。更新：我修改了一下以显示分页，但我想我在if / else块中使用了val函数错误？

filterJobs: function()
{
    var team = $('#selectOne').val();
    var specialty = $('#selectTwo').val();
    var level = $('#selectThree').val();
    var newNumJobs = $('.jobs:visible').length;
    if (team === 'SelectOne' && specialty === 'SelectOne')
    {
        $('.jobs').show();
    }
    else
    {
        $('.jobs').hide()
                .filter('[data-team="' + team + '"][data-specialization="' + specialty + '"][data-level="' + level + '"]')
                .show();

        $('table:visible:odd').css({'background-color': ' #F1F1F1'});
        $('table:visible:even').css({'background-color': '#FFFFFF'});
    }
    if (newNumJobs <= this.pageSize)
    {
        $("#dvJobs span").text("Showing " + newNumJobs + " of " + newNumJobs + " jobs");
    }
    else
    {
        $("#dvJobs span").text("Showing " + this.pageSize + " of " + newNumJobs + " jobs");
    }


    this.buildPaginator(newNumJobs);
}

为了澄清，我已经添加了被过滤的tabe，希望这有助于理解我的问题。

<table data-team="<?php print $name['team']; ?>" data-specialization="<?php print $name['speciality']; ?>" data-level="<?php print $name['level']; ?>" cellpadding="0" cellspacing="0" border="0" width="670px" class="jobs"><tr><td>
    <tr><td colspan="4"><strong>Research Assistant</strong></td>
        <td></td><td></td><td></td></tr>
    <tr>
        <td width="100">Location : </td>
        <td colspan="3">Madrid</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td> Job Code : </td>
        <td width="460">6767676</td>
        <td></td>
        <td></td> 
    </tr>
</table>

Answer 1

我不是积极的我理解你的问题，但是如果你只想要下拉列表的默认选择，则不需要jQuery。只需将selected='selected'添加到要在html中设置为默认值的选项即可。像这样：

<select id="selectOne">
    <option value="Select One">Select One </option>
    <option value="Engineering" selected="selected">Engineering </option>
    ...etc...

在这种情况下，您也可以摆脱“选择一个”选项，并将其作为标签或其他内容。

编辑：

如果需要，您还可以使用jQuery动态应用所选过滤器：

$('#optionId').attr('selected', 'selected');

编辑2：

好的，请阅读原始问题的其他评论。我想我更清楚地知道这个问题是什么。我同意在变更处理程序中进行过滤是最好的。类似的东西：

$('#selectOne, #selectTwo, #selectThree').change(filterJobs);

此外，如果您需要在页面加载时执行此过滤，请按照上面和jQuery调用设置'selected'

$('#selectWhichever').trigger('change');

将触发更改处理程序，而无需实际选择值。

设置选择字段jquery过滤器数据属性的默认值

1 个答案: