Question

我的页面上有多个Select语句，选项都是相同的，基本上是一个排名系统，如下所示。我想要做的是在选择后突出显示所有select语句中的每个选项。即如果在第一个选择中选择“1”，它将在所有Select语句中突出显示。

我认为我与下面的代码非常接近，但它似乎只在我第一次做出选择时起作用。一旦使用了所有选项，最终结果将是所有选项都以灰色背景突出显示。

我正在使用jQuery 1.5。

.pick { background-color: #CCC; }

<table>
    <tr>
        <td>Drop down 1</td>
        <td><select id="dd1" name="dd1">
                <option value=""></option>
                <option value="1"> 1 </option>
                <option value="2"> 2 </option>
                <option value="3"> 3 </option>
                <option value="4"> 4 </option>
                <option value="5"> 5 </option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Drop down 2</td>
        <td><select id="dd2" name="dd2">
                <option value=""></option>
                <option value="1"> 1 </option>
                <option value="2"> 2 </option>
                <option value="3"> 3 </option>
                <option value="4"> 4 </option>
                <option value="5"> 5 </option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Drop down 3</td>
        <td><select id="dd3" name="dd3">
                <option value=""></option>
                <option value="1"> 1 </option>
                <option value="2"> 2 </option>
                <option value="3"> 3 </option>
                <option value="4"> 4 </option>
                <option value="5"> 5 </option>
            </select>
        </td>
    </tr>
</table>

<script type="text/javascript">
    $(document).ready(function () {
        $("select[name*='dd']").change(onSelectChangeDD);
    });

    function onSelectChangeDD() {
        var selected = $("select[name*='dd'] option:selected");
        var test = $(this).val();

        $("select[name*='dd']").children().each(function () {
            // remove all the highlights
            $(this).removeClass("pick");
        });

        $("select[name*='dd']").children().each(function () {

            // highlight the selections
            if ($(this).val() == test) {
                $(this).addClass('pick');
            }
        });

    }
</script>

Answer 1

最终结果一旦所有选项已被使用将是所有的选项以灰色突出显示背景

在这种情况下，您应该删除取消所有项目的代码：

$("select[name*='dd']").children().each(function () {
    // remove all the highlights
    $(this).removeClass("pick");
});

并将其替换为仅解除未选择项目的代码：

$("select[name*='dd']").children().each(function () {
    // remove unused highlights
    if ($("select[name*='dd'] option:selected")
        .filter("[value='" + $(this).attr('value') + "']")
        .length === 0) {
        $(this).removeClass("pick");
    }
});

链接到jsfiddle code。

Answer 2

 $(document).ready(function () {
      //i used another selector and add "dd" class name to all select
      $("select.dd").change(function(){
       $("select.dd").children().removeClass("pick");
        $("select.dd").children('option[value="'+$(this).val()+'"]').addClass("pick");
      });
 });

您可以在http://jsfiddle.net/R9JCd/1/

尝试

jQuery：在多个Select语句中突出显示选项

2 个答案: