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");
} });

`现在我明白，要实现此目的，每个下拉列表选择都必须具有唯一的ID，否则它们将在同一时间全部下拉，因此是data-id值，但是对于我来说，我不记得该怎么做。

任何帮助将不胜感激：）

我创建了一个小提琴供您玩耍。注意：在每次循环中，data-setting-id均不同。 JSFiddle] 1（当前，下拉列表仅在第一个选项上起作用，因为其他选项未添加到提琴中）

Answer 1

我要做的第一个更改是使您的select元素具有唯一的ID：

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

尽管如此，这本身并不能为您带来很多好处。首先，您需要确保在显示所有div之前隐藏所有div。然后，需要确保在选择选项时，同时使用所选值和 select元素的ID来确定要显示的div。

为隐藏起见，我给每个设置div分配了一个option-group类，在Javascript中，我们将运行$(".option-group").hide();。

要显示正确的设置div，我们将相应的选项值与select元素ID连接起来，以创建div的data-setting-id，例如data-setting-id="artw<?php echo $get['id'];?>"和data-setting-id="araiop<?php echo $get['id'];?>"每个选项组div都需要遵循这种模式。

然后在Javascript中执行相同的操作，并将所选选项与元素ID连接：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");
})

Here's the updated fiddle

请注意，您实际上可以通过多种方法来完成此操作。我在这里给您的东西可能不是最好或最有效的。我只是使用您提供的尽可能多的代码为您提供快速解答。

在foreach循环中下拉

1 个答案: