jQuery: параметры выделения в нескольких операторах Select

У меня есть несколько операторов Select на моей странице, и все варианты одинаковы, в основном система ранжирования, как показано ниже. Что я пытаюсь сделать, так это выделить каждую опцию во всех операторах выбора после того, как она была выбрана. т.е. если вы выберете «1» в первом элементе Select, он будет выделен во всех операторах 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>

jquery select option
person JamesP    schedule 05.03.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Конечным результатом после использования всех параметров будет то, что все параметры будут выделены серым фоном.

В этом случае вам следует удалить код, который отключает все элементы:

$("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.

person Andomar    schedule 05.03.2011
comment
@JamesP: Я поместил предупреждение рядом с addClass, и оно было вызвано трижды, но в IE эта опция не отображала фон. Я предполагаю, что это проблема IE, не знаю, как ее обойти! - person Andomar; 06.03.2011
comment
Согласен, похоже проблема с функцией addclass. Это почти как если бы браузер обновился или что-то в этом роде ... - person JamesP; 06.03.2011

arrow_upward
0
arrow_downward 

 $(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/

person Joseadrian    schedule 05.03.2011
comment
Это только кажется, чтобы выделить последний элемент, выбранный в одном из полей выбора. - person JamesP; 06.03.2011
comment
Он закрыт, но не удаляет элементы, которые больше не выбраны. Форма решения Andomar ниже работает хорошо, за исключением IE. - person JamesP; 06.03.2011