выпадающий в цикле foreach

Question

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

Это код:

<select id="aroptions" name="aroptions" data-id="<?php echo $get['id'];?>">
       <option value="none">Please Select your service</option>
       <option class="tw" value="artw">Option 1</option>
       <option class="aiop" value="araiop">Option 2</option>
       <option class="rr" value="rr">Option 3</option>
       <option class="aw" value="aw">Option 4</option>
       <option class="gr" value="gr">Option 5</option>
    </select>

    <div class="twsettings" data-id="<?php echo $get['id'];?>" style="display:none">
    <div class="form-group row" style="padding: 10px;">
        <label for="username" class="col-sm-4 col-form-label">
             Username:
        </label>
        <div class="col-sm-8">
            <input type="text" class="form-control-plaintext input-lg" style="height: 39px; width:100%;" 
              name="twusername" id="twusername" size="45" />
        </div>
        <br><br>
        <label for="username" class="col-sm-4 col-form-label">
            Series Name:
        </label>
        <div class="col-sm-8">
            <input type="text" data-id="<?php echo $get['id'];?>" class="form-control-plaintext input-lg" style="height: 39px; width:100%;" 
              name="twseries" id="twseries" size="45" />
        </div>
        <br><br>
        <label for="default" class="col-sm-4 col-form-label">
            Set as Default:
        </label>
        <div class="col-sm-8">
        <input type="checkbox" name="main_ar_tw" data-id="<?php echo $get['id'];?>" style="width: 5%;height: 34px;" value="Yes"/><br>
        </div>
    </div>
    </div>

Число нерабочих js ниже

 $('select').change(function(){
if ($(this).val() == "tw"){
    $(this).closest('.twsettings').css("display", "none");
    $(this).closest('.twsettings').removeClass("show");
} });

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

Буду признателен за любую помощь:)

Я создал для вас скрипку, с которой можно поиграться.Примечание. Идентификатор data-setting отличается на каждой итерации цикла.JSFiddle] 1 (в настоящее время раскрывающийся список будет работать только в первом варианте, поскольку остальные не добавляются в скрипте)

Answer 1

Первое изменение, которое я хотел бы сделать, - сделать так, чтобы у ваших select элементов были уникальные идентификаторы:

<select id="aroptions<?php echo $get['id'];?>" name="aroptions" data-id="<?php echo $get['id'];?>">

Это само по себе не слишком много дляты хоть.Во-первых, вам нужно убедиться, что вы прячете все элементы div, прежде чем показывать их.Затем вам нужно убедиться, что при выборе параметра вы используете выбранное значение и идентификатор элемента выбора, чтобы определить, какой div нужно показать.

Для скрытия яКаждому параметру настроек присваивается класс option-group, и в Javascript мы будем запускать $(".option-group").hide();.

Чтобы показать правильный параметр настроек, мы объединяем соответствующее значение параметра с элементом selectИдентификатор для создания div'ов data-setting-id, таких как data-setting-id="artw<?php echo $get['id'];?>" и data-setting-id="araiop<?php echo $get['id'];?>". Вам нужно будет следовать этому шаблону для каждого div группы параметров.

Затем в Javascript мы делаем то же самое и объединяем выбранный параметр.с идентификатором элемента: var $elm = $('*[data-setting-id="' + selectedOpt + dataId + '"]');

Вот как я обновил вывод, предоставленный вами в скрипте.

<select id="aroptions123" name="aroptions" data-id="123">
           <option value="none">Please Select your service</option>
           <option class="tw" value="artw">Option 1</option>
           <option class="aiop" value="araiop">Option 2</option>
           <option class="rr" value="rr">Option 3</option>
           <option class="aw" value="aw">Option 4</option>
           <option class="gr" value="gr">Option 5</option>
        </select>

<div class="option-group twsettings" data-setting-id="artw123" style="display:none">
  <div class="form-group row" style="padding: 10px;">
    <label for="username" class="col-sm-4 col-form-label">
                 Username:
            </label>
    <div class="col-sm-8">
      <input type="text" class="form-control-plaintext input-lg" style="height: 39px; width:100%;" name="twusername" id="twusername" size="45" />
    </div>
    <br><br>
    <label for="username" class="col-sm-4 col-form-label">
                Series Name:
            </label>
    <div class="col-sm-8">
      <input type="text" data-id="123" class="form-control-plaintext input-lg" style="height: 39px; width:100%;" name="twseries" id="twseries" size="45" />
    </div>
    <br><br>
    <label for="default" class="col-sm-4 col-form-label">
                Set as Default:
            </label>
    <div class="col-sm-8">
      <input type="checkbox" name="main_ar_tw" data-id="123" style="width: 5%;height: 34px;" value="Yes" /><br>
    </div>
  </div>
</div>
<div class="option-group aiopsettings" data-setting-id="araiop123" style="display:none">
  <div class="form-group row" style="padding: 10px;">
    <label for="username" class="col-sm-4 col-form-label">
                Campaign ID:
            </label>
    <div class="col-sm-8">
      <input type="text" class="form-control-plaintext input-lg" style="height: 39px; width:100%;" name="aiopid" id="aiopid" size="45" />
    </div>
    <br><br>
    <label for="default" class="col-sm-4 col-form-label">
                Set as Default:
            </label>
    <div class="col-sm-8">
      <input type="checkbox" name="main_ar_aiop" style="width: 5%;height: 34px;" value="Yes" /><br>
    </div>
  </div>
</div>

Javascript:

$('select').change(function() {
  var dataId = $(this).attr('data-id');
  var selectedOpt = $(this).val();
  // This is the settings div. Do whatever you want
  var $elm = $('*[data-setting-id="' + selectedOpt + dataId + '"]');
  $(".option-group").hide();
  $elm.show();
  //$elm.removeClass("show");
})

Вот обновленная скрипка

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