JQuery выбрать все параметры в следующем поле множественного выбора - PullRequest
Новая
       2

JQuery выбрать все параметры в следующем поле множественного выбора

4 голосов
/ 27 мая 2011

У меня есть несколько форм, которые требуют использования нескольких полей с несколькими вариантами выбора.(список филиалов, список источников, список продуктов и т. д.). Каждая форма может иметь свой собственный набор мультибоксов для любых нужд моих клиентов.

Я также создал ссылку, которая позволяет пользователю «выбирать все» опции в любом из полей множественного выбора.И пока все работает отлично!Но я хочу сделать jquery более умным.

Вот пример того, что я кодировал: 

<table>
    <tr>
        <td><div id="allaffs" class="selectAll">select all</div></td>
    </tr>
  <tr>
    <td>
    <select name="affid[]" id="affid" size="15" style="width:230px;height:300" multiple="multiple">
      <option value="0" selected="selected">--no affiliate assigned--</option>
        <? while($r = mysql_fetch_array($somequerystuff)){  ?>
      <option value="<?php echo $r['affid']; ?>" selected="selected"><?php echo $r['affname']; ?></option>
      <? } ?>
    </select>   
    </td>
  </tr>
</table>

<table>
    <tr>
        <td><div id="allsources" class="selectAll">select all</div></td>
    </tr>
  <tr>
    <td>
    <select name="sourceid[]" id="sourceid" size="15" style="width:230px;height:300" multiple="multiple">
      <option value="0" selected="selected">--no source assigned--</option>
        <? while($r = mysql_fetch_array($somequerystuff)){  ?>
      <option value="<?php echo $r['sourceid']; ?>" selected="selected"><?php echo $r['sourcename']; ?></option>
      <? } ?>
    </select>   
    </td>
  </tr>
</table>

<script language="javascript" type="text/javascript">
$(document).ready(function(){

  $(".selectAll").click(function(){
    var theID = $(this).attr('id');
    if(theID=='allaffs'){ $("#affid option").attr("selected","selected"); }
    if(theID=='allsources'){ $("#sourceid option").attr("selected","selected"); }
  });

});
</script>

И это полностью работает.Но я склонен добавлять больше мультибоксов по другим причинам фильтрации.Я хочу, чтобы jquery обнаружил событие click для класса .selectAll, но сделал его достаточно умным, чтобы выбрать все опции в следующем доступном мультибоксе.Таким образом, мне не пришлось бы создавать новую строку в коде jquery для нового поля.

Ответы [ 2 ]

6 голосов
/ 27 мая 2011

Вместо того, чтобы основывать его на позиции (следующий доступный мульти-бокс), я бы использовал атрибут данных для хранения идентификатора соответствующего мульти-бокса. 

<div class="selectAll" data-multi-id="sourceid">select all</div>

Затем в вашем скрипте: 

<script language="javascript" type="text/javascript">
    $(document).ready(function(){  
        $(".selectAll").click(function(){    
            var multi = $(this).data('multi-id');
            $('#' + multi + ' option').attr('selected', 'selected');
        });
    });
</script>
3 голосов
/ 27 мая 2011

Для меня аккуратным способом было бы обернуть поле <select multiple="multiple"> и его «выбрать все» в определенном родительском элементе (например, div), а затем использовать .parent () 

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body>
  <div>
    <span class="selectAll">Select all</span>

    <select multiple="multiple">
      <option>1</option>
      <option>2</option>
    </select>
  </div>

  <div>
    <span class="selectAll">Select all</span>

    <select multiple="multiple">
      <option>1</option>
      <option>2</option>
    </select>
  </div>

  <span class="selectAll">Select really all</span>

  <script>
    $(".selectAll").click(function () {
      $(this).parent().find('option').attr('selected','selected');
    });
  </script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...