jQuery: выделение опций в нескольких операторах Select - PullRequest
Новая
       3

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

2 голосов
/ 05 марта 2011

У меня есть несколько операторов 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>

Ответы [ 2 ]

1 голос
/ 05 марта 2011

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

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

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

0 голосов
/ 06 марта 2011 
 $(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/

...