динамический идентификатор элемента с php и jquery

Question

Хорошо, это может немного сбить с толку, но здесь идет.Допустим, у меня есть несколько выпадающих списков на странице.

<select id="filter" name="filter[]">
        <option value="">-- Select Filter --</option>
    </select>

    <select id="load_choice" name="load_choice[]">
        <option value="">-- Select Load_choice --</option>
    </select>

    <select id="plastic" name="plastic[]">
        <option value="">-- Select Plastic --</option>
    </select>

Они динамически заполняются из базы данных запросом ajax.Каждый набор параметров выбора зависит от предыдущего выбора.Это всего лишь фрагмент всех выпадающих списков, но по сути их выбор создает «продукт».Вот javascript, который подключается к php (который подключается к БД).

$(document).ready(function() {
$('#filter').change(function(){

        $('#load_choice').fadeOut();
        $('#loader').show();

        $.post("ajax/ajax_load_choice.php", {
            country: $('#country').val(),
            filter: $('#filter').val()
        }, function(response){
            setTimeout("finishAjax('load_choice', '"+escape(response)+"')", 400);
        });
        return false;
    });


    $('#load_choice').change(function(){

        $('#plastic').fadeOut();
        $('#loader').show();

        $.post("ajax/ajax_plastic.php", {
            country: $('#country').val(),
            filter: $('#filter').val(),
            load_choice: $('#load_choice').val()
        }, function(response){
            setTimeout("finishAjax('plastic', '"+escape(response)+"')", 400);
        });
        return false;
    });


    $('#plastic').change(function(){

        $('#UG_tipping').fadeOut();
        $('#loader').show();

        $.post("ajax/ajax_UG.php", {
            country: $('#country').val(),
            filter: $('#filter').val(),
            load_choice: $('#load_choice').val(),
            plastic: $('#plastic').val()
        }, function(response){
            setTimeout("finishAjax('UG_tipping', '"+escape(response)+"')", 400);
        });
        return false;
    });

    });

    function finishAjax(id, response){
     $('#loader').hide();
     $('#'+id).html(unescape(response));
     $('#'+id).fadeIn();
    }
}

СЕЙЧАС, скажем, я хочу добавить еще одну точно такую ​​же форму с точно такими же параметрами выбора, чтобы "создать другой продукт "на той же странице (отсюда и массив в теге NAME для каждого выбора).Поскольку форма зависит от уникальных идентификаторов, как я могу сделать идентификаторы в этом фрагменте кода динамическими?

$('#filter').change(function(){

        $('#load_choice').fadeOut();
        $('#loader').show();

        $.post("ajax/ajax_load_choice.php", {
            country: $('#country').val(),
            filter: $('#filter').val()
        }, function(response){
            setTimeout("finishAjax('load_choice', '"+escape(response)+"')", 400);
        });
        return false;
    });

В итоге у меня будет 5 наборов этих выбранных групп, чтобы пользователь мог создать 5 продуктов.Как бы мне сделать так, чтобы мне не пришлось делать id = "filter1" и id = "filter2", чтобы совпадать с $ ('# filter'). Change (function .... blah blah blah. В принципе, могу ли ясделать идентификаторы в функции jquery динамическими?

Answer 1

Рекомендуется, чтобы всегда имели уникальные идентификаторы .
Основная причина заключается в том, что выполнение селектора, подобного $('#myId'), может привести к непредсказуемым результатам, когда встраница с этим идентификатором.

jQuery опирается на собственную реализацию браузера document.getElementById(), которая в большинстве случаев возвращает только первый найденный элемент.

Если вы хотите убедиться, что с помощью jQuery у вас есть уникальный идентификатор, выможет сделать что-то вроде:

$('select[id=filter]').each(function(i,el){
    el.id=el.id+'-'+i;
});

Если у вас уже есть уникальный идентификатор, вы можете использовать префиксный селектор ( ^ = или | = ), например:

$('select[id^=filter]');
//or
$('select[id|=filter]');

Вы можете увидеть живой пример обоих в this jsFiddle

---

В качестве альтернативы, если вам не нужны дубликаты идентификаторов, вы можете выбрать все элементы с помощьюданный идентификатор (включая дубликаты) вот так:

$('[id=my-id]');

Answer 2

Я не совсем уверен, что вы спрашиваете. Мое лучшее предположение что-то вроде:

Можно ли с помощью jQuery увеличить поля id элементов формы, чтобы можно было добавить несколько страниц на страницу, чтобы каждая форма была уникально идентифицирована?

Если это разумное понимание вашего вопроса, и, глядя на ответ @Baylor Rae (что, безусловно, является верным толкованием), я не обязательно прав, тогда сработает следующее:

JQuery

$(document).ready(
 function(){
  $('#formAdd').click(
      function(){
          var count = $('#formsBox form').length;
          $('#formsBox form').eq(0).clone().appendTo('#formsBox').find('label, input').each(
              function(){
                  if (this.id) {
                      var curId = this.id;
                      $(this).attr('id',curId + count);
                  }
                  else if ($(this).attr('for')) {
                      var curFor = $(this).attr('for');
                      $(this).attr('for', curFor + count);
                  }
              }
              );
      }
      );
 }
 );

HTML

<div id="formsBox">
    <form action="" method="post">
        <fieldset>
            <ul>
                <li>
                    <label for="firstInput">First Input:</label>
                    <input type="text" name="firstInput" id="firstInput" />
                </li>
                <li>
                    <label for="secondInput">SecondInput:</label>
                    <input type="text" name="secondInput" id="secondInput" />
                </li>
            </ul>
        </fieldset>
    </form>
</div>
<div id="formAdd">Add another form</div>

По сути, при нажатии #formAdd div jQuery находит form, вычисляет, сколько их существует, и сохраняет их как переменную count.

.

Затем он клонирует первую форму (без .eq(0), первый щелчок клонирует одну форму, второй щелчок клонирует две формы, и после этого она экспоненциально), добавляет ее в тот же контейнер (#formsBox, если не хватает имя), а затем ищет label с и input с; если они имеют атрибут id (input) или for (label), он добавляет ранее сохраненную переменную count к этим атрибутам, однозначно идентифицируя их.

Это довольно плохое объяснение, и я уверен, что есть гораздо более красивый способ достижения того же конечного результата в jQuery, но, похоже, он работает. Вот демо JS Fiddle здесь

Answer 3

Это то, что я придумал, обернуть каждый набор полей выбора в div или что-то в этом роде. А затем удалите их атрибут id.

С помощью jQuery вы можете связать изменение и по-прежнему получить два других выбора, как этот.

$('select[name=filter[]]').change(function() {
  var $parent = $(this).parent();

  // hide and show other selects
  $parent.find('select[name=load_choice[]]').fadeOut();
  $parent.find('select[name=plastic[]]').show();

  // make the ajax call
});

// repeat the above code for the others